Browser sessionStorage. zwischen Registerkarten teilen?

Ich habe einige Werte auf meiner Website, die ich löschen möchte, wenn der Browser geschlossen wird. Ich habe mich entschieden sessionStorage, diese Werte zu speichern. Wenn die Registerkarte geschlossen ist, werden sie tatsächlich gelöscht und beibehalten, wenn der Benutzer f5 drückt. Wenn der Benutzer jedoch einen Link auf einer anderen Registerkarte öffnet, sind diese Werte nicht verfügbar.

Wie kann ich sessionStorageWerte zwischen allen Browser-Registerkarten mit meiner Anwendung teilen ?

Der Anwendungsfall: Legen Sie einen Wert in einen Speicher, lassen Sie diesen Wert auf allen Browser-Registerkarten zugänglich und löschen Sie ihn, wenn alle Registerkarten geschlossen sind.

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

Sie können localStorage und seinen eventListener "Speicher" verwenden, um sessionStorage-Daten von einer Registerkarte auf eine andere zu übertragen.

Dieser Code muss auf ALLEN Registerkarten 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 habe dies in Chrom, ff, Safari, dh 11, dh 10, dh 9 getestet

Diese Methode "sollte in IE8 funktionieren", aber ich konnte sie nicht testen, da mein IE jedes Mal abstürzte, wenn ich einen Tab öffnete ... einen beliebigen Tab ... auf einer beliebigen Website. (guter alter IE) PS: Sie müssen natürlich einen JSON-Shim einbinden, wenn Sie auch IE8-Unterstützung wünschen. :) :)

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

Eine Verwendung sessionStoragehierfür ist nicht möglich.

Aus den MDN-Dokumenten

Wenn Sie eine Seite in einem neuen Tab oder Fenster öffnen, wird eine neue Sitzung gestartet.

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

1. Sie können einfach localStoragedas Datum verwenden und sich daran erinnern, an dem es zum ersten Mal erstellt wurde session cookie. Wenn localStorage"Sitzung" älter als der Wert des Cookies ist, können Sie das löschenlocalStorage

   Dies hat den Nachteil, dass jemand die Daten nach dem Schließen des Browsers noch lesen kann. Daher ist dies keine gute Lösung, wenn Ihre Daten privat und vertraulich sind.

2. Sie können Ihre Daten localStoragefür einige Sekunden speichern und einen Ereignis-Listener für ein storageEreignis hinzufügen . Auf diese Weise wissen Sie, wann eine der Registerkarten etwas in das geschrieben hat, localStorageund Sie können den Inhalt in das kopieren sessionStorageund dann einfach das löschenlocalStorage

Wenn Sie in anderen Bereichen mit _blank öffnen, bleibt der sessionStorage so lange erhalten, wie Sie die Registerkarte öffnen, wenn das übergeordnete Element geöffnet ist:

In diesem Link gibt es eine gute jsfiddle, um es zu testen. sessionStorage in neuem Fenster ist nicht leer, wenn Sie einem Link mit target = "_ blank" folgen.

Meine Lösung, um sessionStorage nicht über Registerkarten übertragen zu können, bestand darin, ein localProfile zu erstellen und diese Variable zu entfernen. Wenn diese Variable festgelegt ist, meine sessionStorage-Variablen jedoch nicht vorhanden sind, werden sie erneut initialisiert. Wenn das Fenster zum Abmelden des Benutzers geschlossen wird, wird diese Variable localStorage zerstört

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

1. Auf Ihrer ersten JSP-Seite rufen Sie beim Laden eines Ereignisses ein Servlet (Ajex-Aufruf) auf, um eine "window.title" und einen Ereignis-Tracker in der Sitzung einzurichten (nur eine ganzzahlige Variable, die zum ersten Mal als 0 festgelegt wird).
2. Stellen Sie sicher, dass auf keiner der anderen Seiten ein window.title festgelegt ist
3. Alle Seiten (einschließlich der ersten Seite) fügen ein Java-Skript hinzu, um den Fenstertitel zu überprüfen, sobald das Laden der Seite abgeschlossen ist. Wenn der Titel nicht gefunden wird, schließen Sie die aktuelle Seite / Registerkarte (stellen Sie sicher, dass die Funktion "window.unload" in diesem Fall rückgängig gemacht wird).
4. Legen Sie das Java-Skriptereignis page window.onunload fest (für alle Seiten), um das Seitenaktualisierungsereignis zu erfassen. Wenn eine Seite aktualisiert wurde, rufen Sie das Servlet auf, um den Ereignistracker 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) gemeinsames 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-Zuordnung

<servlet-mapping>
<servlet-name>myAction</servlet-name>
<url-pattern>/data.do</url-pattern>     
</servlet-mapping>  
<servlet>
<servlet-name>myAction</servlet-name>
<servlet-class>xx.xxx.MyAction</servlet-class>
</servlet>

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");
} 
  }