基本信息
文件名称:sessionStorage多Tab标签页数据共享问题分析.docx
文件大小:15.89 KB
总页数:2 页
更新时间:2025-05-22
总字数:约1.24千字
文档摘要

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

目录问题描述问题原因sessionStorage根据第二点应该称为复制而不是共享

问题描述

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

问题原因

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

sessionStorage

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

页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和sessioncookie的运行方式不同。打开多个相同的URL的Tabs页面,会创建各自的sessionStorage。关闭对应浏览器标签或窗口,会清除对应的sessionStorage。

存储在sessionStorage中的数据特定于页面的协议。意思就是:与的sessionStorage相互隔离。被存储的键值对总是以UTF-16DOMString的格式所存储,其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。

根据第二点

简单尝试后发现

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

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

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

应该称为复制而不是共享

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

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