web-dev-qa-db-fra.com

navigateur sessionStorage. partager entre onglets?

J'ai des valeurs sur mon site que je veux effacer lorsque le navigateur est fermé. J'ai choisi sessionStorage pour stocker ces valeurs. Lorsque l'onglet est fermé, ils sont effacés et conservés si l'utilisateur appuie sur f5; Mais si l'utilisateur ouvre un lien dans un onglet différent, ces valeurs ne sont pas disponibles.

Comment partager des valeurs sessionStorage entre tous les onglets du navigateur avec mon application?

Le cas d'utilisation: mettez une valeur dans un espace de stockage, conservez cette valeur dans tous les onglets du navigateur et effacez-la si tous les onglets sont fermés.

if (!sessionStorage.getItem(key)) {
    sessionStorage.setItem(key, defaultValue)
}
javascriptcross-browsersession-storage
116
Vladimir Gordienko

Vous pouvez utiliser localStorage et son eventListener "storage" pour transférer les données sessionStorage d'un onglet à un autre.

Ce code devrait exister sur TOUS les onglets. Il devrait s'exécuter avant vos autres scripts.

// 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' && !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');
};

J'ai testé cela en chrome, ff, safari, c'est-à-dire 11, c'est-à-dire 10, c'est-à-dire 9

Cette méthode "devrait fonctionner dans IE8" mais je ne pouvais pas la tester car mon IE se bloquait à chaque fois que j'ouvrais un onglet ... n'importe quel onglet ... sur n'importe quel site Web. (bon vieux IE) PS: vous aurez évidemment besoin d'inclure un shim JSON si vous voulez aussi le support IE8. :)

Le mérite en revient à cet article complet: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

107
nawlbergs

Utiliser sessionStorage pour cela n’est pas possible.

À partir de MDN Docs

Si vous ouvrez une page dans un nouvel onglet ou une nouvelle fenêtre, une nouvelle session sera lancée.

Cela signifie que vous ne pouvez pas partager entre onglets. Pour cela, vous devez utiliser localStorage

62
Henrik Andersson

  1. Vous pouvez simplement utiliser localStorage et vous rappeler la date à laquelle il a été créé pour la première fois dans session cookie. Lorsque localStorage "session" est plus ancien que la valeur du cookie, vous pouvez effacer la localStorage

    L'inconvénient est que quelqu'un peut toujours lire les données après la fermeture du navigateur. Ce n'est donc pas une bonne solution si vos données sont confidentielles et confidentielles.

  2. Vous pouvez stocker vos données dans localStorage pendant quelques secondes et ajouter un écouteur d'événement pour un événement storage. De cette façon, vous saurez quand l'un des onglets a écrit quelque chose dans la localStorage et vous pouvez copier son contenu dans la sessionStorage, puis effacez simplement la localStorage

8
Adassko

En fait, si vous ouvrez avec _blank, la sessionStorage sera conservée tant que vous ouvrez l'onglet lorsque le parent est ouvert:

Dans ce lien, il y a un bon jsfiddle pour le tester. sessionStorage sur nouvelle fenêtre n'est pas vide, lors d'un lien avec target = "_ blank"

7
Dan Parker

Ma solution pour ne pas avoir sessionStorage transférable sur des onglets était de créer un profil local et de supprimer cette variable. Si cette variable est définie mais que mes variables sessionStorage ne sont pas conservées, réinitialisez-les. Lorsque l'utilisateur se déconnecte, la fenêtre se ferme détruit cette variable localStorage

0
yardpenalty