如何等待浏览器将数据保存在本地存储中？ [ReactJs]

Question

当用户登录时，我将其数据保存在sessionStorage中。在我的主页中，我正在使用componentDidMount（）检查sessionStorage是否为空。如果没有数据，则应将用户重定向到登录页面，否则继续。问题是在浏览器将用户数据保存在其sessionStorage中之前，在登录页面中按下登录按钮并在主页中调用componentDidMount（）方法之前（由于本地存储中尚无数据，因此无法将用户重定向到主页，直到他刷新页面）。浏览器将数据保存到sessionStorage时应如何等待？

登录页面

handleSubmit = e => {
    e.preventDefault();
    axios.post('url', { userId: e.target.elements.userId.value,
    password: e.target.elements.password.value })
    .then((response) => {
      if(response.status=200){
        this.setState({ loggedIn: true });
        let responseJSON = response;
        sessionStorage.setItem("userData", responseJSON);
      } else {
        console.log("Log In Error");
      }
    }).catch((error) => {
      console.log(error);
      this.setState({ loggedIn: false });
    });
};

主页

componentDidMount() {
      if( sessionStorage.getItem('userData') ){
        console.log('User Logged In');
      } else {
        this.setState({redirect: true})
      }
}

Answer 1

您可以在componentDidMount方法内的网络存储上绑定事件监听器。

请记住，这仅适用于同一选项卡或框架中发生的更改。

window.addEventListener('storage', function (e) {
  if (e.storageArea === sessionStorage) {
    // handle change here
  }
});