不同tab页sessionStorage共享情况

先看MDN的描述：

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

第一点很好理解，不赘述。第二点，如果是从一个页面打开一个新的窗口或者一个新的 tab 页，那么这个新的页面会复制顶级会话的 sessionStorage。注意是复制，不是引用。第三点也很好理解，在不同的tab输入相同地址访问，得到的sessionStorage是不同的。总结下来就是，判断不同tab是否属于同个会话，看tab的打开方式。网上有很多结论，但是可能过时了，实验一下。测试环境 Windows10 chrome 版本 102.0.5005.115（正式版本）（64 位）

测试1

demo1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>demo1</title></head><body><h1>demo1</h1><script>if (sessionStorage.getItem('name')) {alert('数据已存在');} else {sessionStorage.setItem('name', '张三');alert(sessionStorage.getItem('name'));}</script></body>
</html>

在两个tab中访问demo1.html，都显示张三，说明新开的页面sessionStorage是新创建的。

以下三点验证了MDN第一点说法。

刷新其中一个页面，显示数据已存在。
关闭页面，ctrl+shift+t 恢复页面，显示数据已存在。
右键复制页面，显示数据已存在。

测试2

demo1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>demo1</title></head><body><h1>demo1</h1><ul><li><a href="./demo2.html" target="_blank">通过链接跳转空白页</a>，显示null</li><li><button onclick="window.open('./demo2.html')">window.open</button>，显示张三</li></ul><script>sessionStorage.setItem('name', '张三');</script></body>
</html>

demo2.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>demo2</title></head><body><h1>demo2</h1><script>var item = sessionStorage.getItem("name");alert(item);</script></body>
</html>

测试结果
1.通过链接跳转空白页打开demo2.html，显示null，说明新页面创建了新的sessionStorage
2.通过window.open打开demo2.html，显示张三，说明新页面复制了原来的sessionStorage，注意这里是复制，不是引用原来的sessionStorage。可以做如下测试来验证：在新打开的页面控制台存入新的值到sessionStorage，然后在初始页面控制台查看发现并没有找到新存入的值。

测试3

demo1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>demo1</title></head><body><h1>demo1</h1><ul><li><a href="./demo1.html" target="_blank">通过链接跳转空白页</a>，显示张三</li><li><button onclick="window.open('./demo1.html')">window.open</button>，显示数据已存在</li></ul><script>if (sessionStorage.getItem('name')) {alert('数据已存在');} else {sessionStorage.setItem('name', '张三');alert(sessionStorage.getItem('name'));}</script></body>
</html>

这次测试用不同方式打开同个页面，测试结果：
1.通过链接跳转空白页打开demo1.html，显示张三，说明新页面创建了新的sessionStorage
2.通过window.open打开demo1.html，显示数据已存在，说明新页面复制了原来的sessionStorage，这里和测试2中第二种情况类似，可以做类似测试：

结论

手动新开一个标签页，会创建新的 sessionStorage
如果是在页面里面打开新页签，有两种方式：
- 通过点击链接，会创建新的 sessionStorage
- 用 window.open 打开，新页面复制了原来的sessionStorage

后话

经过实验，发现上述结论和这篇文章有所出入，所以建议自己实验，避免环境或者版本差异带来的问题。

不同tab页sessionStorage共享情况相关推荐

多个tab页如何共享websocket
假设你正在做一个在线的IM系统,如何在多个tab页之间,共享一个websocket实例呢? sharedWorker:共享线程,同源策略下,多个运行环境共用同一个线程,包括数据. 当时遇到这个问题,第 ...
[转]sessionStorage在同一网站多个标签页内共享数据吗？这取决于标签页如何打开
文章转载自:https://github.com/lmk123/blog/issues/66 ----------------------------------------------------- ...
Vue+Element实现tab页多页面切换
效果图GIF 源码地址 https://gitee.com/marlife/nav-tags.git 已经上传到Gitee(码云),代码拉下来之后: 1.执行安装命令:npm install 2.执行 ...
动态路由和tab页切换路由
动态路由和tab页切换路由文章目录动态路由和tab页切换路由一.在当前页面监听路由的改变 1.beforeRouterEnter 进入前拦截路由 2.beforeRouterUpdate 路由更 ...
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
【Vue实用功能】Vue实现tab页多页面切换
Vue实现tab页多页面切换实现路由发生变化时,新增一个tab标签页,点击其他标签时切换到对应的页面,刷新网页同时保留状态这里就直接说它实现的代码就OK!!! VueX记录下每次新增后的tab标签 ...
Firefox浏览器恢复书签（收藏夹）、历史记录和未关闭的Tab页
平时使用使用Firefox浏览器,总习惯打开很多Tab页而不关闭,下次启动Firefox时自动恢复之前打开的Tab. 有时Firefox会出现异常(突然断电.异常关机等),再打开时浏览器所有的记录都没 ...
Idea 设置打开多个文件 Idea打开多个Tab页 Idea打开多行tab页
Idea 设置打开多个文件 Idea打开多个Tab页 Idea打开多行tab页一.情景描述在使用idea的时候,经常会打开多个java文件,当打开文件达到一定数量时,会出现文件折叠在一起的情况,那 ...
Android 高仿华为手机Tab页滑动导航效果
首先带大家看一下实现效果,用了两种实现方式: 1.基于LinearLayout实现,导航栏不可响应手指滑动 2.基于HorizontalScrollView实现,导航栏可响应手指滑动实现方式虽然不一 ...

不同tab页sessionStorage共享情况

不同tab页sessionStorage共享情况

测试1

测试2

测试3

结论

后话

不同tab页sessionStorage共享情况相关推荐

最新文章

热门文章