Reactjs React Context API 在页面刷新时持久化数据

发布于11月24日

假设我们设置了一个上下文提供程序，以及一些初始数据属性值.

在这个过程中的某个地方，假设消费者修改了这些属性.

重新加载页面时，这些更改将丢失.保存数据的最佳方式是什么，这样我们就可以保留这些数据修改？除了本地存储，还有其他方法吗？

推荐答案

是的，如果您希望数据在重新加载过程中保持不变，您可以 Select 将该信息存储在服务器端(通过api调用)或浏览器存储中(本地存储、会话存储、cookie).您希望使用的选项取决于您希望达到的持久性级别.无论存储 Select 如何，它看起来都可能与

const MyContext = React.createContext(defaultValue);

class Parent extends React.Component {
  setValue = (value) => {    
    this.setState({ value });
  }

  state = {
    setValue: this.setValue,
    value: localStorage.getItem("parentValueKey")
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.value !== prevState.value) {
      // Whatever storage mechanism you end up deciding to use.
      localStorage.setItem("parentValueKey", this.state.value)
    }
  }

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}