Javascript 浏览器会话存储.在标签之间共享

发布于09月25日

我的网站中有一些值，我想在浏览器关闭时清除这些值.我 Select 了sessionStorage来存储这些值.当tab关闭时，它们确实被清除，如果用户按f5，它们将被保留；如果用户选项卡中的某些值不可用，则会打开这些链接.

如何使用我的应用程序在所有浏览器选项卡之间共享sessionStorage个值？

用例:将一个值放入一些存储中，在所有浏览器选项卡中保持该值可访问，并在所有选项卡关闭时清除该值.

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

推荐答案

您可以使用localStorage及其"存储"eventListener将会话存储数据从一个选项卡传输到另一个选项卡.

此代码需要存在于所有选项卡上.它应该在其他脚本之前执行.

// 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，IE11，IE10，IE9中进行了测试

这种方法"应该在IE8中有效"，但我无法测试它，因为每次打开标签时，我的IE都会崩溃....任何账单...在任何网站上.(好的ol IE)PS:如果你还想要IE8支持，显然需要包含一个JSON垫片

这篇完整的文章值得赞扬: