Nasłuchiwanie zdarzeń storage

Web Storage wywołuje zdarzenie storage na każdej innej karcie tego samego originu za każdym razem, gdy zmienia się localStorage. Jest to najprostszy sposób na synchronizowanie wielu otwartych kart tej samej aplikacji — na przykład przekazywanie informacji o wylogowaniu lub zmianie motywu.

Program obsługi należy podłączyć do obiektu window: window.addEventListener("storage", handleStorage). Odbiornik jest wywoływany tylko w innych kartach lub oknach tego samego originu — nigdy w karcie, która sama wykonała zmianę i już wie o aktualizacji.

Zdarzenie zawiera key (zmieniony klucz), oldValue i newValue (ciągi znaków lub null), url (stronę, która wywołała zmianę) oraz storageArea (obiekt Storage — localStorage lub sessionStorage).

Gdy inna karta wywoła localStorage.clear(), zdarzenie storage zostanie wywołane raz z wartością key === null, a zarówno oldValue, jak i newValue będą miały wartość null. Należy wykrywać ten wzorzec, aby obsługiwać masowe czyszczenie oddzielnie od aktualizacji pojedynczego klucza.

Wywołanie removeItem powoduje wywołanie zdarzenia z wartością newValue === null, podczas gdy oldValue zawiera poprzedni ciąg znaków. Usunięcie klucza należy odróżniać od ustawienia klucza na ciąg znaków "null", sprawdzając, czy newValue jest dokładnie wartością null, a nie ciągiem znaków "null".

Zdarzenie nigdy nie jest wywoływane w karcie, która zapisała zmianę. Aby reagować na własne zapisy, należy po setItem wysłać zdarzenie niestandardowe albo opakować setItem w pomocniczą funkcję, która wywołuje zarówno API Storage, jak i wewnętrzną magistralę zdarzeń aplikacji.

Podczas wylogowywania użytkownika należy ustawić klucz taki jak auth:logout wraz ze znacznikiem czasu. Inne karty nasłuchują tego klucza w zdarzeniu storage i natychmiast czyszczą własny stan sesji, przekierowując użytkownika na stronę logowania bez konieczności ponownego klikania.

Gdy użytkownik przełącza motyw w jednej karcie, należy zapisać theme w localStorage. Program obsługi zdarzenia storage w każdej innej karcie odczytuje nową wartość i stosuje document.documentElement.dataset.theme — zmiana natychmiast pojawia się we wszystkich otwartych kartach.

Jeden program obsługi może obsługiwać wiele funkcji, rozgałęziając działanie na podstawie e.key. Instrukcja switch ułatwia zachowanie czytelności mechanizmu rozdzielającego: każdy przypadek obsługuje jeden klucz magazynu i ignoruje niezwiązane zmiany zapisywane przez inne funkcje w tym samym obiekcie Storage.

sessionStorage jest przypisany do karty — jego zapisy nigdy nie wywołują zdarzeń storage w innych kartach, ponieważ mają one własne, niezależne magazyny sessionStorage. Gdy potrzebna jest sygnalizacja między kartami, należy użyć localStorage, nawet jeśli klucz zostanie natychmiast usunięty.

Do bardziej rozbudowanej komunikacji między kartami API BroadcastChannel przesyła dane strukturalne bez korzystania z magazynu: new BroadcastChannel("app").postMessage({ type: "logout" }). BroadcastChannel należy stosować do sygnałów tymczasowych, a zdarzenia storage do stanu, który powinien być również zachowany.

Jeśli karta A wywoła localStorage.setItem("theme", "dark"), które karty otrzymają zdarzenie storage?

Zdarzenie storage dostarcza powiadomienia między kartami za każdym razem, gdy localStorage zmieni się w innej karcie, i zawiera key, oldValue, newValue oraz storageArea. Nie jest wywoływane w karcie zapisującej zmianę, dlatego aby obsługiwać zarówno lokalne, jak i zdalne wywołania, należy połączyć je ze zdarzeniem niestandardowym. Można go używać do przekazywania informacji o wylogowaniu, synchronizacji motywu i obsługi dowolnego stanu, który powinien pozostać spójny między oknami przeglądarki.