优质中文开源软件代码项目资源技术共享平台
传播开源的理念,推广开源项目
学习是对自己最棒的投资!与君共勉!
云服务器主机测评推荐,开源软件代码项目技术资源共享!

网站首页 > web开发 > JavaScript 正文

sessionStorage多Tab标签页数据共享问题分析

longtao100 2023-10-16 00:01:09 JavaScript 30 ℃ 0 评论

目录

问题描述

在 A 页面设置一些 sessionStorage 数据,然后 a 标签 _blank 方式打开另一个 tab B 页面,发现 B 页面有A 页面的 sessionStorage 数据。

问题原因

不同 tab 页面 sessionStorage 数据出现了 “共享”。

sessionStorage

为什么会共享呢?下面看下 sessionStorage 的官方 MDN 介绍:

  • 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
  • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookie 的运行方式不同。
  • 打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage
  • 关闭对应浏览器标签或窗口,会清除对应的 sessionStorage
  • 存储在 sessionStorage 中的数据特定于页面的协议。意思就是:http://example.com 与 https://example.com 的 sessionStorage 相互隔离。
  • 被存储的键值对总是以 UTF-16 DOMString 的格式所存储,其使用两个字节来表示一个字符。对于对象、整数 key 值会自动转换成字符串形式。

根据第二点

简单尝试后发现

  • 通过新建标签页打开相同的页面(属于第三条)创建独立 sessionStorage。
  • 通过 window.open 打开新标签页,共享了原 tab 页中的 sessionStorage。
  • 通过 a 标签 _blank 方式打开新 tab 页,Chrome 86 浏览器共享了 sessionStorage,Chrome 113 和 Firefox 浏览器并没有共享。

所以对于 a 标签打开的页面,是否“共享”sessionStorage 属于浏览器兼容性问题。

在 Chrome 89 版本前,a 标签跳转会共享 sessionStorage。而在 2021年 3月 Chrome 89 版本后,通过 a 标签 target="_blank" 跳转到新页面时 sessionStorage 就会丢失。

应该称为“复制”而不是“共享”

在 A 页面设置一些 sessionStorage 数据,然后 a 标签 _blank 方式打开另一个 tab B 页面,发现 B 页面有A 页面的 sessionStorage 数据。此时两个页面的sessionStorage相互独立,修改不会影响对方,所以称为复制更为准确。

以上就是sessionStorage 多 Tab 标签页数据“共享”的详细内容,更多关于sessionStorage 多 Tab 标签页数据“共享”的资料请关注开源网其它相关文章!

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

请填写验证码
开源分类
最近发表
开源网标签
开源网归档