navigateur sessionStorage. partager entre les onglets? [dupliquer]
cette question a déjà une réponse ici:
- Communication entre onglets ou windows 8 réponses
j'ai quelques valeurs dans mon site qui je veux effacer lorsque le navigateur est proche, j'ai choisi sessionStorage de stocker des valeurs, il est clair lorsque l'onglet est proche et conserver si l'utilisateur appuyez sur f5, mais si l'utilisateur ouvre un lien dans l'onglet différent cette valeur n'est pas disponible. Comment partager les valeurs de sessionStorage entre tous les onglets de navigateur avec mon application?
le cas d'utilisation: mettre de la valeur dans un certain stockage, garder cette valeur accessible dans tous les onglets du navigateur et effacer si tous les onglets est fermé.
if (!sessionStorage.getItem(key)) {
sessionStorage.setItem(key, defaultValue)
}
6 réponses
vous pouvez utiliser localStorage et son" stockage " eventListener pour transférer les données de sessionStorage d'un onglet à l'autre.
ce code devrait exister sur tous les onglets. Il doit s'exécuter avant vos autres 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');
};
j'ai testé cela dans chrome, ff, safari, ie 11, ie 10, ie9
Cette méthode "doit fonctionner dans IE8" mais je ne pouvais pas le tester car mon IE plantait à chaque fois que j'ouvre un onglet.... n'importe quel onglet... sur tout site. (good ol IE) PS: vous aurez évidemment besoin d'inclure un JSON shim si vous voulez aussi le support IE8. :)
crédit va à cet article complet: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication /
utiliser sessionStorage
pour cela n'est pas possible.
From the MDN Docs
l'Ouverture d'une page dans un nouvel onglet ou fenêtre d'une nouvelle session initié.
cela signifie que vous ne pouvez pas partager entre les onglets, pour ce que vous devez utiliser localStorage
-
vous pouvez simplement utiliser
localStorage
et vous rappeler la date à laquelle il a été créé danssession cookie
. LorsquelocalStorage
"session" est plus ancienne que la valeur du cookie, alors vous pouvez effacer lelocalStorage
les inconvénients de ceci est que quelqu'un peut encore lire les données après que le navigateur est fermé, de sorte que ce n'est pas une bonne solution si vos données sont privées et confidentielles.
-
, Vous pouvez stocker vos données
localStorage
pendant quelques secondes et ajouter l'écouteur d'événements pour un événementstorage
. De cette façon, vous saurez quand l'un des onglets a écrit quelque chose aulocalStorage
et vous pouvez copier son contenu dans lesessionStorage
, puis juste effacer lelocalStorage
en fait, si vous regardez D'autres zones, si vous ouvrez avec _blank, il conserve le sessionStorage aussi longtemps que vous ouvrez l'onglet lorsque le parent est ouvert:
dans ce lien, il y a un bon jsfiddle pour le tester. sessionStorage sur la nouvelle fenêtre n'est pas vide, lorsque l'on suit un lien avec target="_blank"
ma solution pour ne pas avoir sessionStorage transférable sur les onglets était de créer un profile local et bang off cette variable. Si cette variable est définie mais que mes variables de stockage de session ne sont pas aller de l'avant et les réinitialiser. Lorsque l'utilisateur se déconnecte la fenêtre se ferme, détruisez cette variable de stockage local
Voici une solution pour empêcher le décalage de session entre les onglets du navigateur pour une application java. Cela fonctionnera pour IE (JSP / Servlet)
- dans votre première page JSP, onload event call un servlet (appel ajex) pour configurer une fenêtre".titre "et Event tracker dans la session(juste une variable entière à définir comme 0 pour la première fois)
- assurez-vous qu'aucune des autres pages n'ouvre de fenêtre.intitulé
- toutes les pages (y compris la première page) Ajouter un script java pour vérifier le titre de la fenêtre une fois la page chargée. si le titre n'est pas trouvé, fermez la page/l'onglet courant(assurez-vous de défaire la fenêtre".décharger "fonction lorsque cela se produit)
- fenêtre de la page de jeu.onunload Java script event (pour toutes les pages) pour capturer l'événement de rafraîchissement de la page, si une page a été rafraîchie, appelez le servlet pour réinitialiser le traqueur d'événements.
1) première page 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)commune de JS pour toutes les pages
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 cartographie
<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)code de la 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");
}
}