How to Share SessionStorage Values Between Browser Tabs?

Sharing sessionStorage Values Between Browser Tabs

Session storage stores data that's accessible within a single browser tab and is cleared when the tab is closed. However, there's a need to share session storage values between tabs for certain applications.

To achieve this, you can utilize localStorage and its "storage" event listener. Below is a code snippet that enables sessionStorage transfer across tabs:

<code class="javascript">// 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' &amp;&amp; !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');
};</code>

This code should be executed on all tabs and runs before other scripts.

This method allows sessionStorage values to be transferred across tabs in Chrome, Firefox, Safari, IE 11, IE 10, and IE9. In IE8, you'll need to include a JSON shim for compatibility.

By implementing this code, you can effectively share sessionStorage values between tabs, allowing your applications to store data persistently across multiple tabs within the same browser session.

The above is the detailed content of How to Share SessionStorage Values Between Browser Tabs?. For more information, please follow other related articles on the PHP Chinese website!