浏览器会话存储。在标签之间共享?

IT技术 javascript cross-browser session-storage
2021-01-29 05:01:19

我的网站中有一些值,我想在浏览器关闭时清除这些值。我选择sessionStorage存储这些值。When tab is closed they are indeed cleared, and kept if the user presses f5; 但是,如果用户在不同的选项卡中打开某个链接,这些值将不可用。

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

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

if (!sessionStorage.getItem(key)) {
    sessionStorage.setItem(key, defaultValue)
}
6个回答

您可以使用 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、ie 11、ie 10、ie9 中测试了这个

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

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

基于这里的答案,我在 localStorage 和 sessionStorage 上创建了一个库来简化这一点。所以现在你只需调用 storageManager.saveSyncedSessionData('data', 'key'); 或 storageManager.savePermanentData('data', 'key'); 等,根据您的需要。完整代码在这里:ebenmonney.com/blog/...
2021-03-15 05:01:19
该解决方案的可靠性如何?既然它是基于事件的,那么有没有可能错过一个事件?
2021-03-21 05:01:19
它看起来BroadcastChannel现在是执行此操作的好工具。developer.google.com/web/updates/2016/09/broadcastchannel
2021-03-24 05:01:19
这不是一个糟糕的解决方案,因为所有监听 localStorage 更改的选项卡都可以读取您的 sessionStorage 吗?如果您以这种方式使自己容易受到攻击,那么使用 SessionStorage 的全部意义何在?就像是的,这有效,但在某种程度上,您只是使用 localstorage 而不是 session。
2021-03-24 05:01:19
不会在所有以前打开的选项卡中触发事件吗?
2021-03-26 05:01:19

使用sessionStorage的,这是不可能的。

来自MDN 文档

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

这意味着您不能在选项卡之间共享,为此您应该使用 localStorage

您可以更改文档 cookie,path='/'从而在浏览器窗口关闭时强制清除它。但是对于标签,我现在不知道。
2021-03-13 05:01:19
如果您右键单击 Chrome 中的选项卡并单击“复制”,sessionStorage则原始选项卡和复制的选项卡实际上是共享的。
2021-03-15 05:01:19
@Anmol 是的,但我已经不能提供任何代码了,那是很久以前的事了。这是丑陋的解决方案,但它对我来说完美无缺。关键是将 tabsOpened 计数器保留在本地存储中,并在页面加载时增加它,但在页面卸载时减少它。因此,当页面卸载和 tabsOpen == 1 最后一个选项卡时,我们可以清除所有内容。有一些我需要处理的小事情,但不记得到底是什么。希望它会帮助你!
2021-03-17 05:01:19
@VladimirGordienko 如果删除localStorage数据的卸载事件发生是因为有人导航到同一选项卡中的不同域,该怎么办在我看来,这会错误地删除localStorage数据——选项卡没有关闭,如果这个人返回,他/她会再次想要数据,对。无论如何,这是一个有趣的方法,没想到:-)
2021-04-09 05:01:19
好的,我明白了,但是当所有浏览器选项卡都关闭时,我如何清除 localStorage?
2021-04-10 05:01:19

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

在这个链接中,有一个很好的 jsfiddle 来测试它。 跟随 target="_blank" 链接时,新窗口上的 sessionStorage 不为空

自 89 版以来,这在 Chrome 中不起作用 - developer.chrome.com/blog/deps-rems-89 - 停止为使用 noopener 打开的窗口克隆 sessionStorage
2021-03-19 05:01:19
  1. 您可以使用localStorage并记住它的首次创建日期session cookielocalStorage“会话”比 cookie 的值更旧时,您可以清除localStorage

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

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

我不让 sessionStorage 通过选项卡传输的解决方案是创建一个 localProfile 并关闭这个变量。如果设置了这个变量但我的 sessionStorage 变量没有继续并重新初始化它们。当用户注销窗口关闭时销毁这个 localStorage 变量

用户关闭标签页时如何销毁localStorage
2021-03-27 05:01:19