window.addEventListener for localStorage 不会在单击时触发

Question

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

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() { ... }
}

通过手动从检查>应用程序>本地存储。

通过手动更改局部存储。

但是，当我尝试使用onClick

更改局部存储时，以下是不起作用的

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

解决方法：

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

Answer 2

根据mdn：

每当对存储对象进行更改时，就会发射储藏器(请注意，该事件不会为SessionStorage更改触发(。这在进行更改的同一页面上无法使用 - 它实际上是使用存储在域上其他页面上的其他页面来同步进行的任何更改的方法。

因此，一切都按预期工作，但是您只能在其他页面上进行更改(例如使用DevTools菜单手动对其进行更改(

才能使用storage事件。

如果您喜欢

，则可以在每次更改后手动触发事件

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