浏览器sessionStorage。分享标签？ [英] browser sessionStorage. share between tabs?

问题描述

我有一些值在我的网站，我想要清除浏览器关闭时，我选择了sessionStorage来存储该值，它清除当选项卡关闭和保持存储，如果用户按f5，但如果用户打开一些链接在不同选项卡此值不可用。如何在我的应用程序的所有浏览器标签之间共享sessionStorage值？

I have some values in my site which i want to clear when browser is close, i chose sessionStorage to store that values, it clear when tab is close and keep storing if user press f5, but if user open some link in different tab this values unavailable. How i can share sessionStorage values between all browser tabs with my application?

用例：在某些存储空间中保存该值，并在所有浏览器标签页中保留该值，如果所有标签页都关闭，则清除该值。

The use case: put value in some storage, keep that value accessible in all browser tabs and clear it if all tabs is closed.

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

推荐答案

您可以使用localStorage及其storageeventListener从一个标签到另一个。

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

我测试了chrome，ff，safari，ie 11，ie 10，ie9

I tested this in chrome, ff, safari, ie 11, ie 10, ie9

这个方法应该在IE8工作，但我无法测试它，因为我的IE崩溃每次我打开一个标签....任何标签...任何网站。 （好ol IE）PS：你显然需要包括一个JSON垫片，如果你想要IE8支持，以及。 ：）

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 to this full article：
http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab -authentication /

Credit goes to this full article: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

这篇关于浏览器sessionStorage。分享标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！