javascript - 使用本地存储和 React 保持用户在刷新时登录

Question

我正在尝试使用本地存储，以便在刷新时，用户仍然处于登录状态，而不是每次都被注销。我已成功使用此代码将数据保存到本地存储(我使用的是 Firebase，因此我将省略大量数据):

 saveToLocal(){
    const local = this.state.loggedIn;
    localStorage.setItem("loggedIn", JSON.stringify(local));
}

loginUser(e){
    e.preventDefault();      
    this.setState({
        loggedIn: "true"
    }, 
    this.saveToLocal);

我现在如何访问本地存储中的数据并立即设置状态以便用户在刷新时保持登录状态？这是我的状态:

constructor(){
    super();

    this.state = {
        loggedIn: ""
    }

谢谢!

Answer 1

你可以做这样的事情。在根组件中跟踪您的用户登录/注销状态。如果您已经有 localStorage 项，那么您只需读取 localStorage 的 componentDidMount 值并根据该值设置状态。

localStorage.getItem('loggedIn')

但也许更好的解决方案是使用 cookie，具体取决于您希望用户保持登录的程度。使用 cookie，您可以为整个逻辑添加时间维度。