javascript - 本地存储的更改未触发事件监听器

Question

我有 React 组件。最初我在 UseEffect 中设置了一些 localStorage。此外，我添加了事件监听器。单击文本后，它会更改 localStorage 值，但事件监听器没有触发，为什么？

import React, { useEffect } from "react";

export default function App() {

  useEffect(() => {
    window.localStorage.setItem("item 1", 'val 1');
    window.addEventListener('storage', () => {
      alert('localstorage changed!')
    })
  }, []);

  const getData = () => {
    localStorage.setItem("item", "val chamged");
  };

  return (
    <div className="App">
      <h1 onClick={getData}>Change localstorage value</h1>

    </div>
  );
}

https://codesandbox.io/s/naughty-engelbart-90tkw

Answer 1

有两件事是错误的。

1. 更改onClick={getData()} onClick={getData}
2. 来自文档(https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event)。 当存储区域(localStorage 或 sessionStorage)在另一个文档的上下文中被修改时，将触发 Window 接口(interface)的存储事件。 请注意最后一句，该事件不会在同一文档中触发。打开 https://codesandbox.io/s/spring-browser-89con 就可以看到在同一浏览器的 2 个选项卡中，警报将开始出现。