React：與本機儲存同步

Question

擁有一個 React 應用程式。某些特定元件會在一段時間內使用相同的金鑰向本機儲存設定不同的資料值。我需要在本地存儲中訂閱該項目的幾個組件。每當本地儲存中更新具有特定鍵的值時，應通知訂閱的元件或向其提供本機儲存中更新的值。

我嘗試為此建立一個自訂掛鉤，並透過向 storage 事件新增事件偵聽器來使用 with，如下所示。

const useSyncLocalStorage = (key: string) => {
  const [storageVal, setStorageVal] = useState<string | null>(() => localStorage.getItem(key));

  const handleStorageChange = () => {
    const value = localStorage.getItem(key);
    setStorageVal(value);
  };

  useEffect(() => {
    window.addEventListener('storage', handleStorageChange);

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

  return storageVal;
};

並在元件中使用它，如下所示：

const locationStored = useSyncLocalStorage('location');

我嘗試在單擊事件上更新本機儲存值，但掛鉤不會傳回本機儲存中的更新值。我驗證了本地儲存值已在開發工具中更新。該問題似乎是在導致儲存變更的相同視窗/選項卡中未觸發 storage 事件。

有什麼辦法可以訂閱localstorage的值嗎？

Answer 1

您採取的方法是正確的，但您是對的，儲存事件不會在導致儲存變更的相同視窗/標籤中觸發。儲存事件旨在通知其他視窗或選項卡儲存已被不同的視窗或選項卡修改。

在您的情況下，由於您要在同一視窗中更新 localStorage 值，因此不會觸發儲存事件，因此您訂閱的元件將不會收到更新。

要克服此限制，您可以修改自訂掛鉤以使用不同的機制來通知訂閱元件有關 localStorage 值變更的資訊。一種方法是使用單獨的事件系統（例如 React Context API 或 Redux 等狀態管理庫）來處理元件之間的通訊。