Javascript 如何在react js中收听会话存储？

我想听听

SessionStorage

中的每一个变化。有没有办法在它改变的时候听它？ 我正在使用react类

class Module extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      ....
    };
  }


  handleClick(e) {
    const value = e.currentTarget.textContent;
    sessionStorage.setItem("AnyValue", value);
  }

  render() {
    return (
      <div
        onClick={this.handleClick}
      >
        {this.props.id}
      </div>
    );
  }
}

类模块扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
....
};
}
handleClick（e）{
常量值=e.currentTarget.textContent；
setItem（“AnyValue”，value）；
}
render（）{
返回(
{this.props.id}
);
}
}

你可以这样做

componentDidMount() {
  window.addEventListener('storage', () => {
    console.log("CHANGED!!!");    
  });
}

记住卸载侦听器

componentWillUnmount() {
  window.removeEventListener('storage');
}

---

不，你应该创建上下文或reducer来进行更改，并期望重新加载，如果你的应用程序有大量数据，你可能应该使用Redux。似乎它不起作用@nemanjawawhat完全不起作用，当您在会话存储中进行更改时，是否获得了

控制台.log

？我看不到控制台登录我想您在其他地方遇到了问题，而不是上面的侦听器。调用

handleClick

后，您是否看到会话存储更新？您可以在DevTools->Application选项卡->会话存储中观察会话存储。此外，如果继续并在其中手动添加/编辑值，您应该会看到console.log消息被触发。