[转]sessionStorage在同一网站多个标签页内共享数据吗？这取决于标签页如何打开

文章转载自：https://github.com/lmk123/blog/issues/66

-------------------------------------------------------

一直以来，我所以为的 sessionStorage 的生命周期是这样的：在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享，并在此网站的最后一个标签页被关闭后清除。注意：这是错误的。

我之所以会这么认为，是因为我写代码的时候，sessionStorage 给我的表现就是这样的。

假设我们有一个 index.html：

<!-- 使用一个新标签页打开自身，并设置一个 sessionStorage -->
<a href="index.html" target="_blank" onclick="sessionStorage.setItem('j', 's')">open myself
</a>

接下来：

在浏览器中打开这个 index.html，我们称之为标签页 A。注意：需要用 http 协议打开！例如 http://localhost/index.html
点击页面上的链接，此时会弹出来标签页 B。
在标签页 B 中打开控制台并执行 sessionStorage.getItem('j')

控制台会输出 's'，这说明标签页 A 和 B 共享了 sessionStorage 中的数据；接下来，先关闭这两个标签页，然后再打开一个标签页 C，再读取一下 j 的值，得到的是 null。

这看起来跟本文一开始的说法是一致的，但今天我遇到了一个奇怪的事情……

我们给上面的步骤添加第四步：

在浏览器中打开这个 index.html，我们称之为标签页 A。注意：需要用 http 协议打开！例如 http://localhost/index.html
点击页面上的链接，此时会弹出来标签页 B。
在标签页 B 中打开控制台并执行 sessionStorage.getItem('j')，得到 's'
新建一个新标签页 D，然后在地址栏内输入 http://localhost/index.html 打开同样的页面，然后执行 sessionStorage.getItem('j') 。

按照我的预期，标签页 D 得到的应该还是 's'，毕竟我认为 sessionStorage 的数据是在同一网站的多个标签页之间共享的。但是我错了，得到的结果是 null。

发生了什么？为什么标签页 B 中得到的是 's'，为什么标签页 D 中却是 null？

细心的同学可能已经发现了，标签页 B 和标签页 D 之间唯一的不同就是它们被打开的方式：标签页 B 是通过在标签页 A 中点击链接打开的，但标签页 D 是在浏览器地址栏输入地址打开的。

我赶紧上 MDN 查了一下，上面是这么说的：

...data stored in sessionStorage gets cleared when the page session ends...Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

所以现在我明白了：通过点击链接（或者用了 window.open）打开的新标签页之间是属于同一个 session 的，但新开一个标签页总是会初始化一个新的 session，即使网站是一样的，它们也不属于同一个 session。

[转]sessionStorage在同一网站多个标签页内共享数据吗？这取决于标签页如何打开相关推荐

ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
大数据客户标签体系_大数据场景营销之标签体系、用户分群、用户画像
大数据一直是各行各业的核心资产,蕴含巨大价值待挖掘,在数据→信息→知识的转化过程中,标签.指标是基础,它将抽象的数据转化为一个相对具象的信息中心,用户分群和用户画像都是在建立在信息中心上的综合应用手段 ...
小程序 a标签_微信内循环生态：朋友圈标签引流视频号、小程序、搜一搜
2019 年 1 月,张小龙在广州的微信公开课 Pro 上进行了一场 4 小时的超时演讲,在演讲中,他举了一个和朋友圈相关的例子,每个人每天在朋友圈里花的时长基本是固定的,随着好友发的内容越来越多,用 ...
织梦直接写php标签,非常实用的织梦dede所有标签调用方法大全 .
该楼层疑似违规已被系统折叠隐藏此楼查看此楼关键描述调用标签: ------------------------------------------------------------------- ...
怎么给网站加js_网站站内SEO优化实操细节详解，权重上升嗖嗖的
做SEO优化的都知道,网站SEO排名的好与坏,影响的因素非常多.而站内优化是重要的一个因素,如果按满分100分来计算,菜鸟菌觉得站内优化至少占20分左右.因此,站内的优化是很重要的,但也不能说做好站内 ...
python网络爬虫系列（七）——selenium的介绍 selenium定位获取标签对象并提取数据 selenium的其它使用方法
一.selenium的介绍知识点: 了解 selenium的工作原理了解 selenium以及chromedriver的安装掌握标签对象click点击以及send_keys输入 1. sele ...
js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？，css,前端 - phpStudy...
父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构如图img加上float 子元素div显示正常. 不加float div显 ...
标签编辑软件linux,Ubuntu下安装音乐标签编辑软件Kid3 3.1
Kid3 是一款功能強大的音乐标签编辑软件.除了可以把标签转换成文件名.文件名转换成标签.修改文件名称格式这些基本功能,Kid3还可以通过网络上的音乐资料库如MusicBrainz.gnudb.org ...
zblog php模板标签,Z-BlogPHP主题教程，zblogphp模板模块标签收藏
一般情况下主题应尽可能使用系统内部的模块管理功能来调用侧栏模块,系统内部内置5个侧栏,分别可以使用{template:sidebar}.{template:sidebar2}.{template:si ...

[转]sessionStorage在同一网站多个标签页内共享数据吗？这取决于标签页如何打开

[转]sessionStorage在同一网站多个标签页内共享数据吗？这取决于标签页如何打开相关推荐

最新文章

热门文章