javascript - attribute - sesión del navegadorAlmacenamiento. compartir entre pestañas?

html title attribute

Question

Esta pregunta ya tiene una respuesta aquí:

• Comunicación entre pestañas o ventanas 7 respuestas

Tengo algunos valores en mi sitio que quiero borrar cuando el navegador está cerca, elegí sessionStorage para almacenar esos valores, se borra cuando la pestaña está cerca y sigo almacenando si el usuario presiona f5, pero si el usuario abre algún enlace en una pestaña diferente, este valor indisponible. ¿Cómo puedo compartir los valores de sessionStorage entre todas las pestañas del navegador con mi aplicación?

El caso de uso: poner valor en algún almacenamiento, mantener ese valor accesible en todas las pestañas del navegador y borrarlo si todas las pestañas están cerradas.

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

¿Alguien puede revisar mi pregunta, por favor? Mi pregunta fue marcada como duplicada, pero en realidad la pregunta relacionada fue hecha hace 2 años pero mis 3 años van, y también esta pregunta es más popular, así que creo que está marcada por error. ¿Alguien puede arreglar esto o simplemente responder por qué sucedió esto, por favor? Gracias.

Answer 1

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

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

2. Puede almacenar sus datos en localStorage durante un par de segundos y agregar un detector de eventos para un evento de storage . De esta forma sabrá cuándo alguna de las pestañas escribió algo a localStorage y puede copiar su contenido a sessionStorage , luego simplemente borre el localStorage

Answer 2

Aquí hay una solución para evitar el corte de sesión entre las 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 configurará como 0 por primera vez)
2. Asegúrese de que ninguna de las otras páginas establezca una ventana.título
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 ventana de la página. Descargue el evento del script java (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 seguidor del evento.

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 servlets

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

Answer 3

En realidad, si mira otras áreas, si abre con _blank mantiene sessionStorage siempre que 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"

Answer 4

Mi solución para no tener sessionStorage transferible over tabs fue crear un perfil local y golpear esta variable. Si esta variable está configurada pero mis variables sessionStorage no continúan y las reinicializan. Cuando el usuario cierra la ventana cierra destruye esta variable localStorage

Answer 5

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 de tus 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 chrome, ff, safari, es decir, 11, es decir, 10, ie9

Este método "debería funcionar en IE8" pero no pude probarlo ya que mi IE se bloqueaba cada vez que abría una pestaña ... cualquier pestaña ... en cualquier sitio web. (buena versión de IE) PD: obviamente, necesitarás incluir una corrección de JSON si también quieres compatibilidad con 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/

Answer 6

Usar sessionStorage para esto no es posible.

De los documentos de MDN

Abrir una página en una nueva pestaña o ventana provocará que se inicie una nueva sesión.

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