如何在 React js 中监听 sessionStorage？

【问题标题】：How to listen sessionStorage in react js?如何在 React js 中监听 sessionStorage？
【发布时间】：2020-12-13 00:53:51
【问题描述】：

我想听听SessionStorage 内部的每一个变化。有没有办法在它改变时听它？我正在使用反应类。

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

【问题讨论】：

不，你应该创建上下文或reducer来进行更改并期望重新渲染，如果你的应用程序有很多数据可能你应该使用Redux。

标签： javascript reactjs dom-events session-storage

【解决方案1】：

你可以的

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

记得卸载监听器

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

【讨论】：

究竟是什么不起作用，当您对会话存储进行更改时，您会收到console.log 吗？
我没有看到控制台日志
我猜你在其他地方有问题，而不是上面的听众。致电handleClick 后，您是否看到了会话存储更新？您可以在 DevTools -> Application 选项卡 -> Session Storage 中观察 Session Storage。此外，如果您继续在其中手动添加/编辑值，您应该会看到 console.log 消息被触发。