在 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)
  }
}, [])