sessionStorage do navegador. compartilhar entre guias?

Tenho alguns valores no meu site que desejo limpar quando o navegador estiver fechado. Eu escolhisessionStorage armazenar esses valores. Quando a guia é fechada, elas são realmente limpas e mantidas se o usuário pressionar f5; Mas se o usuário abrir algum link em uma guia diferente, esses valores não estarão disponíveis.

Como posso compartilhar sessionStoragevalores entre todas as guias do navegador com meu aplicativo?

O caso de uso: coloque um valor em algum armazenamento, mantenha esse valor acessível em todas as guias do navegador e limpe-o se todas as guias estiverem fechadas.

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

Você pode usar localStorage e seu eventListener de "armazenamento" para transferir dados sessionStorage de uma guia para outra.

Esse código precisaria existir em TODAS as guias. Ele deve ser executado antes dos outros 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');
};

Eu testei isso no chrome, ff, safari, ie 11, ie 10, ie9

Este método "deve funcionar no IE8", mas não pude testá-lo, pois meu IE estava travando toda vez que abria uma guia .... qualquer guia ... em qualquer site. (bom ol IE) PS: você obviamente precisará incluir um calço JSON se também desejar suporte ao IE8. :)

O crédito é referente a este artigo completo: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

Usar sessionStoragepara isso não é possível.

Dos documentos MDN

Abrir uma página em uma nova guia ou janela fará com que uma nova sessão seja iniciada.

Isso significa que você não pode compartilhar entre as guias. Para isso, você deve usar localStorage

1. Você pode simplesmente usar localStoragee lembrar a data em que foi criada session cookie. Quando localStorage"sessão" é mais antigo que o valor do cookie, você pode limpar olocalStorage

   Contras é que alguém ainda pode ler os dados depois que o navegador é fechado, portanto, não é uma boa solução se seus dados são particulares e confidenciais.

2. Você pode armazenar seus dados localStoragepor alguns segundos e adicionar um ouvinte de storageevento a um evento. Dessa forma, você saberá quando alguma das guias escreveu algo para o localStoragee poderá copiar seu conteúdo para o e sessionStorage, em seguida, basta limpar olocalStorage

Na verdade, olhando para outras áreas, se você abrir com _blank, ele manterá o sessionStorage enquanto você estiver abrindo a guia quando o pai estiver aberto:

Neste link, há um bom jsfiddle para testá-lo. sessionStorage na nova janela não está vazia, ao seguir um link com target = "_ blank"

Minha solução para não ter sessionStorage transferível em guias foi criar um localProfile e extrair essa variável. Se essa variável estiver definida, mas minhas variáveis ​​sessionStorage não forem executadas, reinicialize-as. Quando o usuário efetua logout da janela, destrua essa variável localStorage

Aqui está uma solução para impedir o corte da sessão entre as guias do navegador para um aplicativo java. Isso funcionará para o IE (JSP / Servlet)

1. Na sua primeira página JSP, o evento onload chama um servlet (chamada ajex) para configurar um "window.title" e um rastreador de eventos na sessão (apenas uma variável inteira a ser definida como 0 pela primeira vez)
2. Certifique-se de que nenhuma das outras páginas defina uma janela.
3. Todas as páginas (incluindo a primeira página) adicionam um script java para verificar o título da janela quando o carregamento da página estiver concluído. se o título não for encontrado, feche a página / guia atual (certifique-se de desfazer a função "window.unload" quando isso ocorrer)
4. Defina o evento script da página window.onunload java (para todas as páginas) para capturar o evento de atualização da página, se uma página tiver sido atualizada, chame o servlet para redefinir o rastreador de eventos.

1) primeira 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 comum para todas as 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 - mapeamento 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 do 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");
} 
  }