关于前端:sessionStorage-多-Tab-标签页数据共享

5次阅读

共计 962 个字符,预计需要花费 3 分钟才能阅读完成。

问题形容

在 A 页面设置一些 sessionStorage 数据,而后 a 标签 _blank 形式关上另一个 tab B 页面,发现 B 页面有 A 页面的 sessionStorage 数据。

问题起因

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

sessionStorage

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

  1. 页面会话在浏览器关上期间始终放弃,并且从新加载或复原页面仍会放弃原来的页面会话。
  2. 在新标签或窗口关上一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookie 的运行形式不同。
  3. 关上多个雷同的 URL 的 Tabs 页面,会创立各自的 sessionStorage
  4. 敞开对应浏览器标签或窗口,会革除对应的 sessionStorage
  • 存储在 sessionStorage 中的数据 特定于页面的协定。意思就是:http://example.comhttps://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 互相独立,批改不会影响对方,所以称为复制更为精确。

正文完
 0