Browser sessionStorage. teilen zwischen den Tabs?

Ich habe einige Werte in meiner Website, die ich löschen möchte, wenn der Browser in der Nähe ist, ich wählte sessionStorage, um diese Werte zu speichern, es wird gelöscht, wenn Tab geschlossen ist und speichern, wenn Benutzer f5 drücken, aber wenn Benutzer einen Link in anderen Tab öffnen diese Werte nicht verfügbar. Wie kann ich sessionStorage-Werte zwischen allen Browser-Tabs mit meiner Anwendung teilen?

Der Anwendungsfall: Geben Sie den Wert in einen Speicher ein, bewahren Sie diesen Wert in allen Browser-Tabs auf und löschen Sie ihn, wenn alle Tabs geschlossen sind.

if (!sessionStorage.getItem(key)) { sessionStorage.setItem(key, defaultValue) } 

   

Sie können localStorage und seinen eventListener “storage” verwenden, um sessionStorage-Daten von einer Registerkarte in eine andere zu übertragen.

Dieser Code müsste auf ALLEN Tabs vorhanden sein. Es sollte vor Ihren anderen Skripten ausgeführt werden.

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

Ich testete das in Chrom, ff, Safari, dh 11, also 10, dh9

Diese Methode "sollte in IE8 funktionieren", aber ich konnte es nicht testen, da mein IE immer abstürzte, wenn ich einen Tab öffnete ... irgendeinen Tab ... auf irgendeiner Webseite. (gut ol IE) PS: Sie müssen natürlich ein JSON-Shim enthalten, wenn Sie auch IE8-Unterstützung möchten. 🙂

Kredit geht zu diesem ganzen Artikel: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

Die Verwendung von sessionStorage ist hierfür nicht möglich.

Aus den MDN-Dokumenten

Wenn Sie eine Seite in einer neuen Registerkarte oder einem neuen Fenster öffnen, wird eine neue Sitzung initiiert.

Das bedeutet, dass Sie nicht zwischen Tabs teilen können, dafür sollten Sie localStorage

  1. Sie können nur localStorage und sich das Datum merken, an dem es zum ersten Mal im session cookie . Wenn localStorage “session” älter als der Wert von cookie ist, können Sie den localStorage

    Das hat zur Folge, dass jemand die Daten nach dem Schließen des Browsers noch lesen kann. Daher ist es keine gute Lösung, wenn Ihre Daten privat und vertraulich sind.

  2. Sie können Ihre Daten für einige Sekunden in localStorage speichern und Ereignis-Listener für ein storage hinzufügen. Auf diese Weise wissen Sie, wann eine der Registerkarten etwas an localStorage und Sie können den Inhalt in die sessionStorage kopieren. localStorage Sie dann einfach localStorage

Wenn Sie mit _blank öffnen, wird die sessionStorage beibehalten, solange Sie die Registerkarte öffnen, während das übergeordnete Element geöffnet ist:

In diesem Link gibt es eine gute Möglichkeit, es zu testen. sessionStorage in neuem Fenster ist nicht leer, wenn einem Link mit target = “_ blank” folgt

Meine Lösung, sessionStorage nicht über Register zu übertragen, bestand darin, ein localProfile zu erstellen und diese Variable abzufangen. Wenn diese Variable gesetzt ist, aber meine sessionStorage-Variablen sind nicht fortfahren und sie neu initialisieren. Wenn Benutzer sich aus dem Fenster ausloggt, wird diese localStorage-Variable gelöscht

Hier ist eine Lösung, um das Scheren von Sitzungen zwischen Browser-Tabs für eine Java-Anwendung zu verhindern. Dies funktioniert für IE (JSP / Servlet)

  1. Rufen Sie auf Ihrer ersten JSP-Seite beim Onload-Ereignis ein Servlet (Ajex-Aufruf) auf, um einen “window.title” – und Event-Tracker in der Sitzung einzurichten (nur eine Integer-Variable, die zum ersten Mal auf 0 gesetzt wird)
  2. Stellen Sie sicher, dass keine der anderen Seiten ein window.title-Fenster enthält
  3. Alle Seiten (einschließlich der ersten Seite) fügen ein Java-Skript hinzu, um den Fenstertitel nach dem Laden der Seite zu überprüfen. Wenn der Titel nicht gefunden wird, schließen Sie die aktuelle Seite / Registerkarte (stellen Sie sicher, dass die function “window.unload” rückgängig gemacht wird, wenn dies auftritt)
  4. Legen Sie das window.onunload-Java-Skript-Ereignis (für alle Seiten) fest, um das Seitenaktualisierungsereignis zu erfassen. Wenn eine Seite aktualisiert wurde, rufen Sie das Servlet auf, um den Ereignis-Tracker zurückzusetzen.

1) erste Seite JS

 BODY onload="javascript:initPageLoad()" function initPageLoad() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var serverResponse = xmlhttp.responseText; top.document.title=serverResponse; } }; xmlhttp.open("GET", 'data.do', true); xmlhttp.send(); } 

2) gemeinsame JS für alle Seiten

 window.onunload = function() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var serverResponse = xmlhttp.responseText; } }; xmlhttp.open("GET", 'data.do?reset=true', true); xmlhttp.send(); } var readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { init(); clearInterval(readyStateCheckInterval); }}, 10); function init(){ if(document.title==""){ window.onunload=function() {}; window.open('', '_self', ''); window.close(); } } 

3) web.xml – Servlet-Mapping

  myAction /data.do   myAction xx.xxx.MyAction  

4) Servlet-Code

 public class MyAction extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { Integer sessionCount = (Integer) request.getSession().getAttribute( "sessionCount"); PrintWriter out = response.getWriter(); Boolean reset = Boolean.valueOf(request.getParameter("reset")); if (reset) sessionCount = new Integer(0); else { if (sessionCount == null || sessionCount == 0) { out.println("hello Title"); sessionCount = new Integer(0); } sessionCount++; } request.getSession().setAttribute("sessionCount", sessionCount); // Set standard HTTP/1.1 no-cache headers. response.setHeader("Cache-Control", "private, no-store, no-cache, must- revalidate"); // Set standard HTTP/1.0 no-cache header. response.setHeader("Pragma", "no-cache"); } }