React.js:将整个状态同步到localStorage

NVI*_*NVI 9 javascript storage local-storage reactjs

我想存储我应用的状态localStorage.是否有回调或事件触发状态变化?我会用它打电话localStorage.state = JSON.stringify(this.state).可能,使用0.5秒节流.

TodoMVC React示例使用localStorage作为存储.但是,它定义了事件处理程序中的保存和删除,例如keydownclick.对于我的情况,做同样的事情会产生很多样板.

Sop*_*ert 27

componentDidUpdate生命周期方法中,您可以序列化状态:

componentDidUpdate: function(prevProps, prevState) {
    localStorage.state = JSON.stringify(this.state);
}
Run Code Online (Sandbox Code Playgroud)

每次组件重新渲染时都会运行该代码(每次道具或状态更改都会发生).

  • 这对于React来说效果很好,对于任何尝试使用React + Flux执行此操作的人都要记住,您还需要保持Stores与此同步.在这种情况下,您可以从localStorage.state初始化每个Store的状态,或者您可以单独缓存每个商店的数据. (4认同)