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

Question

当用户登录时，我将其数据保存在SessionStorage中。在我的主页中，我正在使用ComponentDidmount（）检查SessionStorage是否为空。如果没有数据，则应将用户重定向到登录页面，否则请继续。问题是在登录页面中登录按钮中按下按下componentDidmount（）方法在主页中正在调用，然后浏览器将用户数据保存在其sessionStorage中（由于本地存储中还没有数据，因此无法将用户重定向到主页，直到主页直到主页他刷新页面）。我应该如何等待浏览器将数据保存到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方法内的Web存储中绑定和事件侦听器。

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

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