我的网站中有一些值,我想在浏览器关闭时清除这些值.我选择了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垫片

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

Javascript相关问答推荐

在nodejs中渲染网页时永远不会结束加载图标

Bootstrap js onclick classList.remove 内容消失

Javascript 通过从数组值中仅选择真值来更改值

删除有条件的重复对象

在悬停时为字体大小设置动画时出现闪烁问题

react js中的搜索过滤器

锚标记点击以区分相同的 onClick Javascript 函数

为什么我的 React.useEffect() 中有太多的重新渲染?

Google OAuth2 出现问题(应用没有后端,因此只有客户端)

在 JavaScript 中,我可以阻止 onmouseup 事件被触发,用我自己的事件替换它吗?

如何在 React.js 中处理未知数量的状态变量?

为什么这个二维数组过滤不起作用?

停止使用 javascript 循环音频但完成播放迭代

使用 NextJS 确保敏感代码仅在服务器端运行,这些代码可以从哪里运行?

如何使用包含图像 url 的 JS 数组设置背景 html 正文的图像?

如何过滤从随机字符串生成的元音和辅音字母

向下滚动页面,然后使用 jQuery 向上滚动

str.replace(/^/gm, "\t") 的预期行为是什么

findIndex 方法在值存在时不检索索引

基于模式 Marklogic/java 脚本批量删除文档