Écouter les événements de stockage

Le stockage Web déclenche un événement de stockage dans chaque autre onglet de même origine chaque fois que localStorage est modifié. Il s’agit de la manière la plus simple de synchroniser plusieurs onglets ouverts de la même application, par exemple pour propager une déconnexion ou un changement de thème.

Attachez le gestionnaire à window : window.addEventListener("storage", handleStorage). L’écouteur ne se déclenche que dans les autres onglets ou fenêtres de la même origine, jamais dans l’onglet qui a effectué la modification et qui connaît déjà la mise à jour.

L’événement contient key (la clé qui a changé), oldValue et newValue (des chaînes ou null), url (la page à l’origine de la modification) et storageArea (l’objet de stockage, localStorage ou sessionStorage).

Lorsqu’un autre onglet appelle localStorage.clear(), l’événement de stockage se déclenche une seule fois avec key === null et avec oldValue et newValue à null. Détectez ce schéma afin de traiter séparément l’effacement global et les mises à jour d’une seule clé.

Un appel à removeItem déclenche l’événement avec newValue === null et oldValue contenant la chaîne précédente. Distinguez « clé supprimée » de « clé définie sur la chaîne null » en vérifiant que newValue est strictement égal à null, et non à la chaîne "null".

L’événement ne se déclenche jamais dans l’onglet qui a écrit la modification. Pour réagir à vos propres écritures, déclenchez un événement personnalisé après setItem, ou encapsulez setItem dans une fonction auxiliaire qui appelle à la fois l’interface de stockage et le bus d’événements de votre application.

Définissez une clé comme auth:logout avec un horodatage lorsqu’un utilisateur se déconnecte. Les autres onglets écoutent cette clé dans l’événement de stockage, puis effacent immédiatement leur propre état de session et redirigent vers la page de connexion, sans que l’utilisateur ait besoin de cliquer à nouveau.

Lorsque l’utilisateur change de thème dans un onglet, écrivez theme dans localStorage. Le gestionnaire de stockage de chaque autre onglet lit la nouvelle valeur et applique document.documentElement.dataset.theme : le changement apparaît instantanément dans tous les onglets ouverts.

Un seul gestionnaire peut servir plusieurs fonctionnalités en effectuant une sélection selon e.key. Une instruction switch permet de conserver un répartiteur lisible : chaque cas traite une clé de stockage et ignore les modifications sans rapport écrites par les autres fonctionnalités dans le même espace de stockage.

sessionStorage est propre à chaque onglet : ses écritures ne déclenchent jamais d’événements de stockage dans les autres onglets, car ceux-ci disposent de leur propre sessionStorage indépendant. Utilisez localStorage lorsqu’une communication entre onglets est nécessaire, même si vous supprimez immédiatement la clé ensuite.

Pour une messagerie plus riche entre onglets, l’interface BroadcastChannel envoie des données structurées sans toucher au stockage : new BroadcastChannel("app").postMessage({ type: "logout" }). Utilisez BroadcastChannel pour les signaux temporaires et les événements de stockage pour l’état qui doit également être conservé.

Si l’onglet A appelle localStorage.setItem("theme", "dark"), quels onglets reçoivent l’événement de stockage ?

L’événement de stockage transmet des notifications entre onglets chaque fois que localStorage est modifié dans un autre onglet, avec key, oldValue, newValue et storageArea. Il ne se déclenche pas dans l’onglet qui écrit : associez-le donc à un événement personnalisé pour distribuer les modifications à la fois localement et à distance. Utilisez-le pour propager les déconnexions, synchroniser les thèmes et maintenir cohérent tout état qui doit rester identique entre les fenêtres du navigateur.