react中如何存储一组数据到localStorage中

在React中存储一组数据到localStorage中，可以按照以下步骤进行操作：

1. 在组件中定义一个数组来存储数据，例如：

state = {
  data: []
}

2. 在组件挂载时，从localStorage中获取之前存储的数据，如果有则更新组件的state：

componentDidMount() {
  const data = localStorage.getItem('data');
  if (data) {
    this.setState({ data: JSON.parse(data) });
  }
}

3. 当数据更新时，将数据存储到localStorage中：

componentDidUpdate(prevProps, prevState) {
  if (prevState.data !== this.state.data) {
    localStorage.setItem('data', JSON.stringify(this.state.data));
  }
}

完整代码示例：

class MyComponent extends React.Component {
  state = {
    data: []
  }

  componentDidMount() {
    const data = localStorage.getItem('data');
    if (data) {
      this.setState({ data: JSON.parse(data) });
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.data !== this.state.data) {
      localStorage.setItem('data', JSON.stringify(this.state.data));
    }
  }

  handleAdd = (item) => {
    const newData = [...this.state.data, item];
    this.setState({ data: newData });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleAdd('new item')}>Add</button>
        <ul>
          {this.state.data.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>
    );
  }
}