如何在 ReactJS 中正确设置 localStorage？答案

【问题标题】：How to set a localStorage in ReactJS correctly?如何在 ReactJS 中正确设置 localStorage？
【发布时间】：2018-01-12 15:19:20
【问题描述】：

我将 CodePen 用于 ReactJS 项目。我需要为状态的一部分设置localStorage：

this.state={
    Things:{
        element:"value",
        element2: "value"
    },
    activated:-1
}

由于我只需要设置Things，我决定在组件生命周期中设置localStorage：componentDidUpdate()

componentDidUpdate(prevProps,prevState){
    localStorage.setItem("myThings",JSON.stringify(this.state.Things));
}

如果我打电话给console.log(localStorage.getItem("myThings"))，我不会得到任何存储值。

对于localStorage 检查部分，我在构造函数中实现了一个解决方案，因为我在 React 文档中读到应该更喜欢构造函数而不是 componentWillMount() 方法（尽管我也尝试了后者）。

constructor(props){
    super(props);
    if (localStorage.getItem("myThings")!==null){
        this.state={
            Things:JSON.parse(localStorage.getItem("myThings")),
            activated:-1
        }
     }
     ...

【问题讨论】：

错字只出现在stackoverflow上

标签： javascript reactjs local-storage

【解决方案1】：

setItem 是一个函数：

componentDidUpdate(prevProps,prevState){
    localStorage.setItem("myThings",JSON.stringify(this.state.Things));
}

【讨论】：

另外，如果需要存储更复杂的数据结构，请看这个答案：stackoverflow.com/a/2010994/2549154

【解决方案2】：

如上所述，setItem 是一个函数。您可能还需要访问窗口 obj 上的 localStorage。

window.localStorage.setItem(...);

或为它创建一个变量并引用它作为简写。

const storage = window.localStorage;
storage.setItem(...);

【讨论】：

【解决方案3】：

分心造成的错误。问题是if(...){...} 语句之后的构造函数中缺少else。所以它每次在 if 语句中设置的状态之后设置下一个状态。

谢谢大家。

【讨论】：