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

Question

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

LogIn Page

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 });
    });
};

Home Page

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
  }
});