Ascoltare gli eventi di archiviazione

La Web Storage genera un evento storage in ogni altra scheda della stessa origine ogni volta che localStorage cambia. È il modo più semplice per mantenere sincronizzate più schede aperte della stessa app, ad esempio propagando un logout o il cambio del tema.

Colleghi il gestore a window: window.addEventListener("storage", handleStorage). Il listener si attiva solo nelle altre schede o finestre della stessa origine, mai nella scheda che ha eseguito la modifica, perché è già a conoscenza dell'aggiornamento.

L'evento contiene key (la chiave modificata), oldValue e newValue (stringhe o null), url (la pagina che ha attivato la modifica) e storageArea (l'oggetto Storage, localStorage o sessionStorage).

Quando un'altra scheda chiama localStorage.clear(), l'evento storage viene generato una sola volta con key === null e con oldValue e newValue entrambi null. Riconosca questo schema per gestire separatamente la cancellazione completa dagli aggiornamenti di una singola chiave.

Una chiamata a removeItem genera l'evento con newValue === null e oldValue contenente la stringa precedente. Distingua tra «chiave eliminata» e «chiave impostata sulla stringa null» verificando che newValue sia strettamente null e non la stringa "null".

L'evento non viene mai generato nella scheda che ha scritto la modifica. Per reagire alle proprie scritture, distribuisca un evento personalizzato dopo setItem oppure racchiuda setItem in un helper che chiami sia la Storage API sia l'event bus dell'applicazione.

Quando un utente esegue il logout, imposti una chiave come auth:logout con un timestamp. Le altre schede ascoltano quella chiave nell'evento storage e cancellano immediatamente il proprio stato della sessione, reindirizzando alla pagina di accesso senza che l'utente debba fare nuovamente clic.

Quando l'utente cambia il tema in una scheda, scriva theme in localStorage. Il gestore storage in ogni altra scheda legge il nuovo valore e applica document.documentElement.dataset.theme: la modifica appare immediatamente in tutte le schede aperte.

Un solo gestore può servire molte funzionalità, diramandosi in base a e.key. Un'istruzione switch mantiene leggibile il dispatcher: ogni caso gestisce una chiave di storage e ignora le modifiche non pertinenti scritte dalle altre funzionalità nello stesso Storage.

sessionStorage è specifico per scheda: le sue scritture non generano mai eventi storage nelle altre schede, perché ciascuna dispone di un sessionStorage indipendente. Utilizzi localStorage quando è necessaria la segnalazione tra schede, anche se rimuove subito dopo la chiave.

Per una messaggistica tra schede più ricca, la BroadcastChannel API invia dati strutturati senza toccare lo storage: new BroadcastChannel("app").postMessage({ type: "logout" }). Utilizzi BroadcastChannel per i segnali transitori e gli eventi storage per lo stato che deve anche persistere.

Se la scheda A chiama localStorage.setItem("theme", "dark"), quali schede ricevono l'evento storage?

L'evento storage invia notifiche tra schede ogni volta che localStorage cambia in un'altra scheda, includendo key, oldValue, newValue e storageArea. Non viene generato nella scheda che esegue la scrittura, quindi lo combini con un evento personalizzato per una distribuzione completa, locale e remota. Lo utilizzi per propagare il logout, sincronizzare il tema e mantenere coerente tra le finestre del browser qualsiasi stato che debba restare sincronizzato.