在reactjs中使用本地存储和componentDidMount

基础概念

在ReactJS中，本地存储（Local Storage）是一种在客户端浏览器中存储数据的方式，它允许网站存储大量数据而不影响网站的性能。数据保存在用户的设备上，即使关闭浏览器或重启设备，数据依然存在。

componentDidMount 是React生命周期方法之一，它在组件第一次渲染到DOM之后被调用。这个方法非常适合执行一些只在组件挂载后需要进行的操作，比如从服务器获取数据、订阅外部数据源或设置定时器等。

类型与应用场景

本地存储类型：主要有两种，localStorage 和 sessionStorage。localStorage 数据永久保存，直到被清除；sessionStorage 数据在页面会话结束时（通常是关闭浏览器标签页）被清除。
应用场景：用户登录状态的保持、购物车数据的保存、个性化设置的存储等。

示例代码

以下是一个在ReactJS中使用localStorage和componentDidMount的简单示例：

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    // 尝试从本地存储中获取数据
    const storedData = localStorage.getItem('exampleData');
    if (storedData) {
      this.setState({ data: JSON.parse(storedData) });
    } else {
      // 如果本地存储中没有数据，则从服务器获取（此处为示例，省略了实际的异步请求代码）
      // 假设获取到的数据为 new_data
      const new_data = { /* ... */ };
      localStorage.setItem('exampleData', JSON.stringify(new_data));
      this.setState({ data: new_data });
    }
  }

  render() {
    return (
      <div>
        {/* 渲染数据 */}
        {this.state.data ? <p>{JSON.stringify(this.state.data)}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export default ExampleComponent;