Comment partager les valeurs de SessionStorage entre les onglets du navigateur ?

Partage des valeurs de sessionStorage entre les onglets du navigateur

Le stockage de session stocke les données accessibles dans un seul onglet du navigateur et est effacé lorsque l'onglet est fermé. Cependant, il est nécessaire de partager les valeurs de stockage de session entre les onglets pour certaines applications.

Pour y parvenir, vous pouvez utiliser localStorage et son écouteur d'événements « stockage ». Vous trouverez ci-dessous un extrait de code qui permet le transfert de sessionStorage entre les onglets :

<code class="javascript">// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
  if(!event) { event = window.event; } // ie suq
  if(!event.newValue) return;          // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' &amp;&amp; !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if(window.addEventListener) {
  window.addEventListener("storage", sessionStorage_transfer, false);
} else {
  window.attachEvent("onstorage", sessionStorage_transfer);
};


// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};</code>

Ce code doit être exécuté sur tous les onglets et s'exécute avant les autres scripts.

Cette méthode permet de transférer les valeurs de sessionStorage entre onglets dans Chrome, Firefox, Safari, IE 11, IE 10 et IE9. Dans IE8, vous devrez inclure une cale JSON pour des raisons de compatibilité.

En implémentant ce code, vous pouvez partager efficacement les valeurs de sessionStorage entre les onglets, permettant ainsi à vos applications de stocker des données de manière persistante sur plusieurs onglets au sein de la même session de 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!