browser sessionStorage share between tabs

Question

I have some values in my site which I want to clear when the browser is closed  I chose sessionStorage to store those values  When tab is closed they are indeed cleared  and kept if the user presses f5  But if the user opens some link in a different tab these values are unavailable   How I can share sessionStorage values between all browser tabs with my application   The use case  put a value in some storage  keep that value accessible in all browser tabs and clear it if all tabs are closed   if   sessionStorage getItem key         sessionStorage setItem key  defaultValue

User · Answer

Using sessionStorage for this is not possible   From the MDN Docs     Opening a page in a new tab or window will cause a new session to be   initiated    That means that you can t share between tabs  for this you should use localStorage

User · Answer

You can use localStorage and its  storage  eventListener to transfer sessionStorage data from one tab to another     This code would need to exist on ALL tabs   It should execute before your other 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 - gt  send it     localStorage setItem  sessionStorage   JSON stringify sessionStorage           the other tab should now have it  so we re done with it      localStorage removeItem  sessionStorage        lt - could do short timeout as well      else if  event key     sessionStorage   amp  amp   sessionStorage length           another tab sent data  lt - 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         I tested this in chrome  ff  safari  ie 11  ie 10  ie9  This method  should work in IE8  but i could not test it as my IE was crashing every time i opened a tab     any tab    on any website   good ol IE  PS  you ll obviously need to include a JSON shim if you want IE8 support as well      Credit goes to this full article  http   blog guya net 2015 06 12 sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication

User · Answer

Here is a solution to prevent session shearing between browser tabs for a java application  This will work for IE  JSP Servlet    In your first JSP page  onload event call a servlet  ajex call  to setup a  window title  and event tracker in the session just a integer variable to be set as 0 for first time   Make sure none of the other pages set a window title All pages  including the first page  add a java script to check the window title once the page load is complete  if the title is not found then close the current page tab make sure to undo the  window unload  function when this occurs    Set page window onunload java script event for all pages  to capture the page refresh event  if a page has been refreshed call the servlet to reset the event tracker    1 first 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  amp  amp  xmlhttp status    200                              var serverResponse   xmlhttp responseText              top document title serverResponse                                   xmlhttp open  GET    data do   true       xmlhttp send         2 common JS for all 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  amp  amp  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 mapping   lt servlet-mapping gt   lt servlet-name gt myAction lt  servlet-name gt   lt url-pattern gt  data do lt  url-pattern gt        lt  servlet-mapping gt     lt servlet gt   lt servlet-name gt myAction lt  servlet-name gt   lt servlet-class gt xx xxx MyAction lt  servlet-class gt   lt  servlet gt    4 servlet code  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

User · Answer

My solution to not having sessionStorage transferable over tabs was to create a localProfile and bang off this variable  If this variable is set but my sessionStorage variables arent go ahead and reinitialize them  When user logs out window closes destroy this localStorage variable

User · Answer

Actually looking at other areas  if you open with  blank it keeps the sessionStorage as long as you re opening the tab when the parent is open   In this link  there s a good jsfiddle to test it  sessionStorage on new window isn  39 t empty  when following a link with target  quot  blank quot

User · Answer

You can just use localStorage and remember the date it was first created in session cookie  When localStorage  quot session quot  is older than the value of cookie then you may clear the localStorage Cons of this is that someone can still read the data after the browser is closed so it s not a good solution if your data is private and confidental   You can store your data to localStorage for a couple of seconds and add event listener for a storage event  This way you will know when any of the tabs wrote something to the localStorage and you can copy its content to the sessionStorage  then just clear the localStorage

[javascript] browser sessionStorage. share between tabs?

Examples related to javascript

Examples related to cross-browser

Examples related to session-storage