Maison  >  Article  >  interface Web  >  Comment partager les données de SessionStorage entre les onglets du navigateur ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-21 15:06:03479parcourir

How to Share SessionStorage Data Across Browser Tabs?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn