reactjs - 会话存储侦听器仅适用于手动更改

Question

我有一个应用程序，我想在会话存储中存储一个布尔值，告诉用户是否登录。这个布尔值应该被监听，每当它改变时，应用组件中的状态应该改变为会话存储变量。

为了完成这个任务，我添加了一个窗口事件监听器，它应该跟踪会话存储的更新，然后改变状态。这通过 storage.setItem() 不起作用。但是，当我通过 chrome 的开发人员工具更改本地存储中的值时，它起作用了。这意味着，以某种方式倾听是有效的。

componentDidMount(){
    if (typeof window !== 'undefined') {
      let isTrue = (sessionStorage.getItem('loggedIn') === 'true');
      this.setState({loggedIn: isTrue});
      window.addEventListener('storage', this.sessionStorageUpdated)
    }
  }

  sessionStorageUpdated() {
    console.log("storage updated");
    let isTrue = (sessionStorage.getItem('loggedIn') === 'true');
    console.log(isTrue);
    if (isTrue) {
      this.setState({loggedIn: true})
    } 
    else {
      this.setState({loggedIn: false})
    }
  }

  componentWillUnmount(){
    if (typeof window !== 'undefined') {
        window.removeEventListener('storage', this.sessionStorageUpdated)
    }
  }

如果会话存储更新，我希望状态会发生变化，但这不会发生。但是，如果我直接更改开发工具中的值，它确实有效。

标签： reactjs