Gérer les événements de stockage entre les onglets

Lorsqu'un utilisateur ouvre votre application dans deux onglets et met à jour une valeur dans l'onglet A, l'onglet B affiche toujours l'ancien état. Chaque onglet possède son propre état React en mémoire, même s'ils partagent localStorage.

Sans coordination, les onglets ne s'accordent pas sur la valeur actuelle.

Le navigateur déclenche un événement storage dans les autres onglets de la même origine chaque fois que localStorage est modifié. Point important, il ne se déclenche pas dans l'onglet à l'origine de la modification.

C'est exactement le signal dont l'onglet B a besoin pour apprendre que l'onglet A a modifié une donnée.

Dans un useEffect, appelez window.addEventListener('storage', handler) et renvoyez une fonction de nettoyage qui le supprime. Le composant s'abonne ainsi aux modifications entre onglets.

L'effet doit s'exécuter une seule fois lors du montage ; un tableau de dépendances vide ou stable convient donc.

L'objet événement contient key (la clé qui a changé), oldValue et newValue (les chaînes avant et après), ainsi que storageArea (l'objet de stockage concerné).

Une clé null avec des valeurs null signifie que le stockage a été entièrement vidé.

L'événement de stockage se déclenche pour chaque clé de l'origine ; votre gestionnaire doit donc vérifier event.key === yourKey avant de réagir. Ignorer les clés sans rapport évite les nouveaux rendus inutiles.

Gérez également le cas où event.newValue est nul, ce qui signifie que la clé a été supprimée.

Lorsqu'une modification pertinente est reçue, analysez event.newValue et appelez votre fonction de mise à jour pour actualiser l'état React. L'onglet secondaire se synchronise ainsi avec la modification effectuée ailleurs.

Associée à une fonction useLocalStorage, cette approche ferme la boucle entre les onglets.

BroadcastChannel permet aux onglets de la même origine de s'envoyer directement des messages avec postMessage. Cette solution est plus claire que le fait de détourner les événements de stockage et fonctionne même sans écrire dans localStorage.

Créez un canal nommé, publiez les mises à jour et écoutez les événements message.

React fournit useSyncExternalStore pour s'abonner aux stockages externes de manière sûre en contexte concurrent. Vous pouvez relier sa fonction d'abonnement à l'événement storage et son instantané à une lecture de localStorage.

Cela intègre correctement les mises à jour du stockage externe au rendu React.

Une application classique consiste à se déconnecter partout : lorsqu'un onglet efface l'indicateur d'authentification, l'événement de stockage des autres onglets le détecte et les redirige vers l'écran de connexion.

Cela empêche un onglet obsolète de continuer à afficher du contenu authentifié.

Le thème est un autre excellent cas d'utilisation : l'activation du mode sombre dans un onglet écrit dans localStorage, l'événement de stockage se déclenche dans les autres et leur état de thème est immédiatement mis à jour.

L'utilisateur bénéficie d'une apparence cohérente, quel que soit l'onglet vers lequel il bascule.

La synchronisation entre onglets consiste à écouter l'événement storage (ou à utiliser BroadcastChannel), à filtrer sur vos clés et à mettre à jour l'état React à partir de la nouvelle valeur.

Pour des abonnements robustes et sûrs en contexte concurrent, useSyncExternalStore est le choix moderne.

Testez votre compréhension des événements entre onglets.

Vous avez appris que l'événement storage se déclenche dans les autres onglets, ainsi qu'à l'écouter, à filtrer par clé et à mettre à jour l'état, et vous avez découvert les alternatives BroadcastChannel et useSyncExternalStore.

Vous avez vu des cas d'utilisation réels comme la déconnexion partout et la synchronisation du mode sombre entre onglets.