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

Question

浏览器会话存储。标签之间共享？我在我的网站中有一些值，我希望在浏览器关闭时清除，我选择sessionStorage来存储这些值，当tab关闭时清除它并在用户按f5时保持存储，但如果用户在不同的选项卡中打开一些链接这个值不可用。如何在我的应用程序的所有浏览器选项卡之间共享sessionStorage值？用例：将值放在某个存储中，在所有浏览器选项卡中保持该值可访问，如果所有选项卡都关闭则清除它。if (!sessionStorage.getItem(key)) {    sessionStorage.setItem(key, defaultValue)}

Answer 1

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

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

// transfers sessionStorage from one tab to anothervar 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 localStorageif(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