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)
}
98
demandé sur Vladimir Gordienko 2013-12-02 14:16:51

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 /

87
répondu nawlbergs 2015-09-24 16:47:24

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

55
répondu Henrik Andersson 2013-12-02 10:21:45
  1. vous pouvez simplement utiliser localStorage et vous rappeler la date à laquelle il a été créé dans session cookie . Lorsque localStorage "session" est plus ancienne que la valeur du cookie, alors vous pouvez effacer le localStorage

    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.

  2. , Vous pouvez stocker vos données localStorage pendant quelques secondes et ajouter l'écouteur d'événements pour un événement storage . De cette façon, vous saurez quand l'un des onglets a écrit quelque chose au localStorage et vous pouvez copier son contenu dans le sessionStorage , puis juste effacer le localStorage

6
répondu Adassko 2013-12-02 10:49:50

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"

5
répondu Dan Parker 2017-05-23 12:34:36

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

0
répondu yardpenalty 2016-08-24 17:35:50

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)

  1. 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)
  2. assurez-vous qu'aucune des autres pages n'ouvre de fenêtre.intitulé
  3. 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)
  4. 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");
} 
  }
-7
répondu DTB 2014-01-20 08:10:14