Auf Storage-Ereignisse reagieren

Web Storage löst bei jeder Änderung von localStorage ein storage-Ereignis in jedem anderen Tab derselben Origin aus. Dies ist die einfachste Möglichkeit, mehrere geöffnete Tabs derselben Anwendung synchron zu halten – beispielsweise um eine Abmeldung oder einen Designwechsel weiterzugeben.

Fügen Sie den Handler zu window hinzu: window.addEventListener("storage", handleStorage). Der Listener wird nur in anderen Tabs oder Fenstern derselben Origin ausgelöst – niemals in dem Tab, der die Änderung selbst vorgenommen hat und daher bereits über die Aktualisierung Bescheid weiß.

Das Ereignis enthält key (den geänderten Schlüssel), oldValue und newValue (Zeichenfolgen oder null), url (die Seite, die die Änderung ausgelöst hat) sowie storageArea (das Storage-Objekt – localStorage oder sessionStorage).

Wenn ein anderer Tab localStorage.clear() aufruft, wird das Storage-Ereignis einmal mit key === null ausgelöst; sowohl oldValue als auch newValue sind dann null. Erkennen Sie dieses Muster, um das vollständige Löschen getrennt von Aktualisierungen einzelner Schlüssel zu behandeln.

Ein Aufruf von removeItem löst das Ereignis mit newValue === null aus, während oldValue die vorherige Zeichenfolge enthält. Unterscheiden Sie „Schlüssel gelöscht“ von „Schlüssel auf die Zeichenfolge null gesetzt“, indem Sie prüfen, ob newValue strikt null und nicht die Zeichenfolge "null" ist.

Das Ereignis wird niemals in dem Tab ausgelöst, der die Änderung geschrieben hat. Um auf eigene Schreibvorgänge zu reagieren, lösen Sie nach setItem ein benutzerdefiniertes Ereignis aus oder kapseln Sie setItem in einer Hilfsfunktion, die sowohl die Storage API als auch Ihren Ereignisbus innerhalb der Anwendung aufruft.

Setzen Sie bei der Abmeldung eines Benutzers einen Schlüssel wie auth:logout mit einem Zeitstempel. Andere Tabs achten im Storage-Ereignis auf diesen Schlüssel und löschen sofort ihren eigenen Sitzungsstatus; anschließend leiten sie zur Anmeldeseite weiter, ohne dass der Benutzer erneut klicken muss.

Wenn der Benutzer in einem Tab das Design umschaltet, schreiben Sie theme in localStorage. Der Storage-Handler in jedem anderen Tab liest den neuen Wert und wendet document.documentElement.dataset.theme an – die Änderung erscheint sofort in allen geöffneten Tabs.

Ein Handler kann viele Funktionen bedienen, indem er anhand von e.key verzweigt. Eine switch-Anweisung hält den Dispatcher übersichtlich: Jeder case-Zweig behandelt einen Storage-Schlüssel und ignoriert nicht relevante Änderungen, die andere Funktionen in denselben Storage schreiben.

sessionStorage ist an einen Tab gebunden – seine Schreibvorgänge lösen niemals Storage-Ereignisse in anderen Tabs aus, da diese über eigene, unabhängige sessionStorage-Speicher verfügen. Verwenden Sie localStorage, wenn eine Signalisierung über mehrere Tabs erforderlich ist, auch wenn Sie den Schlüssel anschließend sofort wieder entfernen.

Für umfangreichere Nachrichten zwischen Tabs sendet die BroadcastChannel API strukturierte Daten, ohne den Speicher zu verwenden: new BroadcastChannel("app").postMessage({ type: "logout" }). Verwenden Sie BroadcastChannel für kurzlebige Signale und Storage-Ereignisse für Status, der zusätzlich persistent bleiben muss.

Welche Tabs empfangen das Storage-Ereignis, wenn Tab A localStorage.setItem("theme", "dark") aufruft?

Das Storage-Ereignis liefert tabübergreifende Benachrichtigungen, sobald localStorage in einem anderen Tab geändert wird, und enthält key, oldValue, newValue und storageArea. Im schreibenden Tab wird es nicht ausgelöst. Kombinieren Sie es daher mit einem benutzerdefinierten Ereignis, um eine vollständige lokale und entfernte Weiterleitung zu erreichen. Verwenden Sie es für die Weitergabe von Abmeldungen, die Synchronisierung des Designs und jeden Status, der über mehrere Browserfenster hinweg konsistent bleiben soll.