Comment partager les données de SessionStorage entre les onglets du navigateur ?

Partage des données de stockage de session entre les onglets du navigateur

Problème :

Vous souhaitez stocker des données dans votre site Web, accessible à partir de tous les onglets et doit être effacé à la fermeture du navigateur. Cependant, sessionStorage ne persiste que dans l'onglet actuel.

Question :

Comment pouvez-vous partager les valeurs de sessionStorage entre tous les onglets du navigateur au sein de votre application ?

Réponse :

Vous pouvez utiliser localStorage et son eventListener « stockage » pour transférer les données de sessionStorage d'un onglet à un autre. Pour mettre en œuvre cela :

1. Incluez le code suivant dans tous les onglets :

   <code class="js">// transfers sessionStorage from one tab to another
   var sessionStorage_transfer = function(event) {
     // Handle sessionStorage data transfer between tabs
   };
   
   // listen for changes to localStorage
   if(window.addEventListener) {
     window.addEventListener("storage", sessionStorage_transfer, false);
   } else {
     window.attachEvent("onstorage", sessionStorage_transfer);
   };</code>

2. Événement déclencheur pour demander des données de sessionStorage à partir d'autres onglets :

   <code class="js">// Ask other tabs for session storage (this triggers the event)
   if (!sessionStorage.length) {
     localStorage.setItem('getSessionStorage', 'foobar');
     localStorage.removeItem('getSessionStorage', 'foobar');
   };</code>

Cette solution vous permet de partager des données de sessionStorage sur tous les onglets du même navigateur. Il s'agit d'une technique utile pour conserver les données qui doivent être accessibles sur plusieurs onglets du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!