在 react(useEffect) 中监听 localStorage

Question

我在 React 中使用了一些第三方库。 这将使页面上的一些本地存储发生变化。 我尝试使用 javascript 存储事件来监听本地存储更改，并将 localStorage.getItem('test') 作为 useEffect 的依赖项。 但它没有监听 localStorage 的变化。

这是我的代码

useEffect(() => {
  window.addEventListener('storage', () => {
    console.log(JSON.parse(localStorage.getItem('test')));
  })
},[])

如何在 React 中监听 localStorage 事件。

Answer 1

基于这个答案Listen for changes with localStorage on the same window

反应版本：

在其他脚本添加任何内容到本地存储之前添加此代码

const originalSetItem = localStorage.setItem;

localStorage.setItem = function (key, value) {
  const event = new Event("itemInserted");

  event.value = value; // Optional..
  event.key = key; // Optional..

  document.dispatchEvent(event);

  originalSetItem.apply(this, arguments);
};

在您的组件中：

useEffect(() => {
  const localStorageSetHandler = function (e) {
    alert('localStorage.set("' + e.key + '", "' + e.value + '") was called');
  };

  document.addEventListener("itemInserted", localStorageSetHandler, false);

  // remember to remove the listener
  return () =>
    document.removeEventListener("itemInserted", localStorageSetHandler);
}, []);

Answer 2

你可以这样！

useEffect(() => {
  function checkLocalData() {
    const item = localStorage.getItem('test')

    if (item) {
      checkLocalData(item)
    }
  }

  window.addEventListener('storage', checkLocalData)

  return () => {
    window.removeEventListener('storage', checkLocalData)
  }
}, [])