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 等状态管理库）来处理组件之间的通信。