Storage-Ereignisse zwischen Tabs verarbeiten

Wenn Ihre App in zwei Tabs geöffnet ist und eine Person in Tab A einen Wert aktualisiert, zeigt Tab B weiterhin den alten Zustand an. Jeder Tab besitzt seinen eigenen React-Zustand im Arbeitsspeicher, obwohl beide localStorage gemeinsam nutzen.

Ohne Koordination stimmen die Tabs nicht mit dem aktuellen Wert überein.

Der Browser löst bei jeder Änderung von localStorage ein storage-Ereignis in anderen Tabs derselben Origin aus. Wichtig ist, dass es nicht in dem Tab ausgelöst wird, der die Änderung vorgenommen hat.

Genau dieses Signal benötigt Tab B, um zu erfahren, dass Tab A etwas aktualisiert hat.

In einem useEffect rufen Sie window.addEventListener('storage', handler) auf und geben eine Bereinigung zurück, die den Listener entfernt. Dadurch abonnieren Sie Änderungen zwischen Tabs.

Der Effekt sollte einmal beim Mounten ausgeführt werden, daher eignet sich ein leeres oder stabiles Abhängigkeitsarray.

Das Ereignisobjekt enthält key (welcher Schlüssel geändert wurde), oldValue und newValue (die Zeichenketten vor und nach der Änderung) sowie storageArea (das betroffene Speicherobjekt).

Ein null-Schlüssel mit null-Werten bedeutet, dass der Speicher vollständig geleert wurde.

Das storage-Ereignis wird für jeden Schlüssel innerhalb der Origin ausgelöst. Ihr Handler sollte daher vor der Reaktion event.key === yourKey prüfen. Das Ignorieren nicht relevanter Schlüssel verhindert unnötige erneute Renderings.

Behandeln Sie außerdem den Fall, dass event.newValue null ist, also der Schlüssel entfernt wurde.

Wenn eine relevante Änderung eintrifft, parsen Sie event.newValue und rufen Ihren Setter auf, um den React-Zustand zu aktualisieren. Dadurch wird der zweite Tab mit der Änderung aus dem anderen Tab synchronisiert.

Zusammen mit einem useLocalStorage-Hook schließt dies den Synchronisierungskreislauf zwischen den Tabs.

BroadcastChannel ermöglicht es Tabs derselben Origin, sich mit postMessage direkt Nachrichten zu senden. Das ist sauberer, als Speichereignisse zweckzuentfremden, und funktioniert auch ohne in localStorage zu schreiben.

Sie erstellen einen benannten Channel, senden Aktualisierungen und hören auf message-Ereignisse.

React stellt useSyncExternalStore bereit, um nebenläufigkeitssicher externe Speicher zu abonnieren. Sie können dessen Subscribe-Funktion mit dem storage-Ereignis und dessen Snapshot mit einem Lesevorgang aus localStorage verbinden.

So werden Aktualisierungen des externen Speichers korrekt in das React-Rendering integriert.

Ein klassischer Anwendungsfall ist die Abmeldung überall: Wenn ein Tab das Authentifizierungs-Flag löscht, erkennen die Speichereignisse in den anderen Tabs dies und leiten sie zum Anmeldebildschirm weiter.

So wird verhindert, dass ein veralteter Tab weiterhin authentifizierte Inhalte anzeigt.

Auch das Theme eignet sich hervorragend: Wenn in einem Tab der Dark Mode aktiviert oder deaktiviert wird, wird die Änderung in localStorage geschrieben, das storage-Ereignis in den anderen Tabs ausgelöst und deren Theme-Zustand sofort entsprechend aktualisiert.

So erhält die Person unabhängig davon, zu welchem Tab sie wechselt, eine einheitliche Darstellung.

Die Synchronisierung zwischen Tabs besteht im Wesentlichen daraus, das storage-Ereignis abzuhören oder BroadcastChannel zu verwenden, auf Ihre Schlüssel zu filtern und den React-Zustand anhand des neuen Werts zu aktualisieren.

Für robuste, nebenläufigkeitssichere Abonnements ist useSyncExternalStore die moderne Wahl.

Testen Sie Ihr Verständnis von Ereignissen zwischen Tabs.

Sie haben gelernt, dass das storage-Ereignis in anderen Tabs ausgelöst wird, wie Sie darauf hören, nach Schlüssel filtern und den Zustand aktualisieren. Außerdem haben Sie die Alternativen BroadcastChannel und useSyncExternalStore kennengelernt.

Sie haben praktische Anwendungsfälle wie die Abmeldung in allen Tabs und den tabübergreifenden Dark Mode gesehen.