sesión del navegador Almacenamiento. compartir entre pestañas?

Tengo algunos valores en mi sitio que quiero borrar cuando el navegador está cerrado. Elegí sessionStoragealmacenar esos valores. Cuando se cierra la pestaña, se borran y se mantienen si el usuario presiona f5; Pero si el usuario abre algún enlace en una pestaña diferente, estos valores no estarán disponibles.

¿Cómo puedo compartir sessionStoragevalores entre todas las pestañas del navegador con mi aplicación?

El caso de uso: coloque un valor en algún almacenamiento, mantenga ese valor accesible en todas las pestañas del navegador y desactívelo si todas las pestañas están cerradas.

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

Puede usar localStorage y su EventListener de "almacenamiento" para transferir datos de sessionStorage de una pestaña a otra.

Este código debería existir en TODAS las pestañas. Debería ejecutarse antes que sus otros 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');
};

Probé esto en cromo, ff, safari, es decir, 11, es decir, 10, es decir, 9

Este método "debería funcionar en IE8" pero no pude probarlo ya que mi IE fallaba cada vez que abría una pestaña ... cualquier pestaña ... en cualquier sitio web. (bueno, IE) PD: obviamente necesitarás incluir una cuña JSON si también quieres soporte para IE8. :)

El crédito va a este artículo completo: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

Usar sessionStoragepara esto no es posible.

De los documentos de MDN

Al abrir una página en una nueva pestaña o ventana, se iniciará una nueva sesión.

Eso significa que no puede compartir entre pestañas, para esto debe usar localStorage

1. Puede usar localStoragey recordar la fecha en que se creó por primera vez session cookie. Cuando localStorage"sesión" es anterior al valor de la cookie, puede borrar ellocalStorage

   Contras de esto es que alguien aún puede leer los datos después de cerrar el navegador, por lo que no es una buena solución si sus datos son privados y confidenciales.

2. Puede almacenar sus datos localStoragedurante un par de segundos y agregar un detector de eventos para un storageevento. De esta manera, sabrá cuándo alguna de las pestañas escribió algo en el localStoragey puede copiar su contenido en el sessionStorage, luego simplemente borre ellocalStorage

En realidad, mirando otras áreas, si abre con _blank, mantiene la sesión Almacenamiento mientras abra la pestaña cuando el padre está abierto:

En este enlace, hay un buen jsfiddle para probarlo. sessionStorage en una nueva ventana no está vacía, cuando se sigue un enlace con target = "_ blank"

Mi solución para no tener sessionStorage transferible a través de pestañas fue crear un perfil local y aprovechar esta variable. Si esta variable está configurada pero mis variables sessionStorage no están adelante, reinícielas. Cuando el usuario cierra sesión, la ventana se cierra y destruye esta variable localStorage

Aquí hay una solución para evitar el corte de sesión entre pestañas del navegador para una aplicación Java. Esto funcionará para IE (JSP / Servlet)

1. En su primera página JSP, el evento onload llama a un servlet (llamada ajex) para configurar un "window.title" y un rastreador de eventos en la sesión (solo una variable entera que se establecerá como 0 por primera vez)
2. Asegúrese de que ninguna de las otras páginas establezca una ventana.
3. Todas las páginas (incluida la primera página) agregan un script java para verificar el título de la ventana una vez que se completa la carga de la página. si no se encuentra el título, cierre la página / pestaña actual (asegúrese de deshacer la función "window.unload" cuando esto ocurra)
4. Configure la página page.onunload java script event (para todas las páginas) para capturar el evento de actualización de la página, si una página se ha actualizado, llame al servlet para restablecer el rastreador de eventos.

1) primera página 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) JS común para todas las páginas

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 - mapeo de servlet

<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) código de servlet

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