Question

我想通过以下代码使用localStorage捕获window.addEventListener('storage')中的更改。

class A extends Component {
  constructor(props) {
    super(props);
    this.storageChanged = this.storageChanged.bind(this);
  }
  componentDidMount() {
    window.addEventListener('storage', this.storageChanged);
  }
  storageChanged(e) { 
    alert('storageChanged');
    console.log(e);
  }
  render() { ... }
}

通过从“检查”>“应用程序”>“本地存储”中手动更改localStorage，此方法非常完美。

但是当我尝试使用onClick更改localStorage时，以下操作不起作用

class A extends Component {
  constructor(props) {
    super(props);
    this.storageChanged = this.storageChanged.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    window.addEventListener('storage', this.storageChanged);
  }
  storageChanged(e) { 
    alert('storageChanged');
    console.log(e);
  }
  handleClick(e) {
    localStorage.setItem('isLoggedIn','false');
  }
  render() { 
    return <button onClick={this.handleClick}>Click</button>
  }
}

因此，当我单击按钮时，isLoggedIn会发生变化，但是storageChanged不会触发。怎么了？

Answer 1

根据MDN：

每当对Storage对象进行更改时都会触发StorageEvent（请注意，sessionStorage更改不会触发此事件）。 这将无法在进行更改的同一页面上完成 –实际上，这是域中其他页面使用存储来同步所做的所有更改的一种方式。

因此，一切都按预期进行，但是只有在其他页面上进行了更改（例如使用devtools菜单手动更改）时，您才可以使用storage事件

如果愿意，您可以在每次更改后手动触发事件

  handleClick(e) {
    localStorage.setItem('isLoggedIn','false');
    window.dispatchEvent(new Event('storage'));
  }

Answer 2

解决方法：

handleClick(e) {
  const eventMock = {}; // my event mock if needed
  localStorage.setItem('isLoggedIn','false');
  storageChanged(eventMock);
}

用于localStorage的window.addEventListener不会触发onClick

2 个答案: