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

Question

问

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

生命在于创新_475 发布于 2023-02-13 14:25

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

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

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

nawlbergs.. 112

您可以使用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/

4 个回答

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

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

2023-02-13 14:27 回答

霸道Q丫头
使用sessionStorage此功能是不可能的.

来自MDN Docs

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

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

2023-02-13 14:27 回答

书友66421539
2023-02-13 14:27 回答

余温

您可以使用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/

2023-02-13 14:27 回答

asd54w464wq_212

撰写答案