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

Question

我在我的网站中有一些值,我希望在浏览器关闭时清除,我选择sessionStorage来存储该值,当选项卡关闭时清除它并在用户按f5时保持存储,但如果用户在不同的选项卡中打开一些链接这个值不可用.我如何在我的应用程序之间共享所有浏览器选项卡之间的sessionStorage值？

用例:将值放在某个存储中,在所有浏览器选项卡中保持该值可访问,如果所有选项卡都关闭则清除它.

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

Answer 1

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

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

// 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测试了这个,即11,即10,ie9

这个方法"应该在IE8中工作",但我无法测试它,因为我的IE每次打开一个标签时崩溃....任何标签......在任何网站上.(好的IE浏览器)PS:如果你也想要IE8支持,你显然需要包含一个JSON垫片.:)

归功于这篇完整的文章:http: //blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

Answer 2

使用sessionStorage此功能是不可能的.

来自MDN Docs

在新选项卡或窗口中打开页面将导致启动新会话.

这意味着你不能在标签之间共享,为此你应该使用 localStorage

Answer 3

1. 您可以使用localStorage并记住它首次创建的日期session cookie.当localStorage"会话"早于cookie的值时,您可以清除localStorage

   缺点是有人在浏览器关闭后仍然可以读取数据,因此如果您的数据是私密且有信心的,那么这不是一个好的解决方案.

2. 您可以将数据存储localStorage几秒钟,并为storage事件添加事件侦听器.通过这种方式,您可以知道任何标签何时写入localStorage内容并且您可以将其内容复制到该标签sessionStorage,然后清除localStorage

Answer 4

实际上在查看其他区域时,如果使用_blank打开它,只要在父项打开时打开选项卡,它就会保留sessionStorage:

在这个链接中,有一个很好的jsfiddle来测试它. 当跟踪带有target ="_ blank"的链接时,新窗口上的sessionStorage不为空

Answer 5

我发现在选项卡之间共享 sessionStorage 的唯一方法是window.open：

• window.open('./page2.html','')使用新选项卡打开 page2
• window.open('./page2.html','height=100, width=100')在新窗口中使用新选项卡打开 page2。

Page2可以从page1获取sessionStorage的副本，但这两个sessionStorage对象是相互独立的。