如何正确设置ReactJS中的localStorage？

-1

我使用CodePen作为ReactJS项目。我需要设置localStorage为国家的一部分，那就是：如何正确设置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 
     } 
    } 
    ...

来源

2017-08-04 Alessandro Carrese

错字仅在stackoverflow上 –

错误从分心。问题是if(...){...}声明后构造函数中缺少else。因此每次在if语句中设置的状态之后都会设置下一个状态。

谢谢大家。

来源

2017-08-04 18:04:24

setItem是一个函数：

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

来源

2017-08-04 15:56:35

此外，如果您需要存储更复杂的数据结构，请参阅此答案：https://stackoverflow.com/a/2010994/2549154 – Matthew

从以上陈述setItem是一个函数。您可能还需要访问window obj上的localStorage。

window.localStorage.setItem(...);

或为其制作一个变量并为此引用一个简写。

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

来源

2017-08-04 15:59:25 Alexg2195

如何正确设置ReactJS中的localStorage？

回答

相关问题