Javascript 如何使用localStorage在React中刷新页面后保持状态

每次用户登录时，我都希望状态保持为“true”，即使重新加载页面也是如此。 该状态最初设置为false（让_authed=false）。 但是当我重新加载页面时，它返回到false，这是索引页面

我所做的 当用户登录时，我将用户的详细信息保存在localStorage中，当用户注销时，我清除localStorage并将其设置为false。（这个很好用）

在setAuthed（）函数中，我试图检查我存储在localStorage中的用户是否为null，它应该将authed变量保持为true

但当我刷新页面时，它不起作用。有什么事吗，我做错了？谢谢你的帮助

let _authed = false;

// User logs in, set user in localStorage
saveUser(user){
  _user = user;
  localStorage.setItem('user', JSON.stringify(user))
},

//User clicks logout, set state to false 
setLogout(){
  _authed = false;
  localStorage.clear()
},

 // If there is a user in local storage, always set state to true
setAuthed(){
     if (localStorage.getItem("user") !== null) {
      _authed = true;
      }
},


getAuthed(){
  return _authed;
},

---

您可以使用

React lifecycle

方法来读取和写入某种持久状态。这里我写了一个小例子来说明这一点

类根扩展React.Component{
状态={
伊斯洛格丁：错
}
组件安装（）{
const persistState=localStorage.getItem（'rootState'）；
如果（持续状态）{
试一试{
this.setState（JSON.parse（persistState））；
}捕获（e）{
//不是json
}
}
}
组件将卸载（）{
localStorage.setItem（'rootState'，JSON.stringify（this.state））；
}
渲染（）{
返回(
{this.props.children}
)
}
}

您在哪里调用

setAuthed

？调用这些函数的实际React代码在哪里？这些函数位于哪里？（希望不是全局范围，而是您正在为React组件导入/需要的某个库对象）它实际上是一个flux体系结构，代码驻留在Store中。这个答案有正确的想法，但它不会按原样工作。

persistState

有三种不同的拼写方式，它是

localStorage.getItem（）

和

localStorage.setItem

。更重要的是，

组件将卸载

在重新加载窗口之前没有机会运行。您必须使用

卸载前

处理程序或更好的方法，但只要在获得令牌后立即存储它。