Reagieren: Synchronisierung mit lokalem Speicher

Question

Haben Sie eine React-App. Bestimmte Komponenten legen über einen bestimmten Zeitraum unterschiedliche Datenwerte mit demselben Schlüssel im lokalen Speicher fest. Ich muss mehrere Komponenten dieses Projekts im lokalen Speicher abonnieren. Immer wenn ein Wert mit einem bestimmten Schlüssel im lokalen Speicher aktualisiert wird, sollten abonnierte Komponenten benachrichtigt oder mit dem aktualisierten Wert im lokalen Speicher versorgt werden.

Ich habe versucht, dafür einen benutzerdefinierten Hook zu erstellen und mit zu verwenden, indem ich dem storage-Ereignis einen Ereignis-Listener hinzugefügt habe, wie unten gezeigt.

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;
};

und verwenden Sie es in Ihrer Komponente wie folgt:

const locationStored = useSyncLocalStorage('location');

Ich habe versucht, den lokalen Speicherwert beim Klickereignis zu aktualisieren, aber der Hook gibt den aktualisierten Wert nicht im lokalen Speicher zurück. Ich habe überprüft, ob der lokale Speicherwert in den Entwicklungstools aktualisiert wurde. Das Problem scheint darin zu liegen, dass das storage-Ereignis nicht in demselben Fenster/Tab ausgelöst wird, das die Speicheränderung verursacht hat.

Gibt es eine Möglichkeit, den Wert von localstorage zu abonnieren?

Answer 1

您采取的方法是正确的，但您是对的，存储事件不会在导致存储更改的同一窗口/选项卡中触发。存储事件旨在通知其他窗口或选项卡存储已被不同的窗口或选项卡修改。

在您的情况下，由于您要在同一窗口中更新 localStorage 值，因此不会触发存储事件，因此您订阅的组件将不会收到更新。

要克服此限制，您可以修改自定义挂钩以使用不同的机制来通知订阅组件有关 localStorage 值更改的信息。一种方法是使用单独的事件系统（例如 React Context API 或 Redux 等状态管理库）来处理组件之间的通信。