sessionStorage 的数据会在同一网站的多个标签页之间共享吗?这取决于标签页如何打开!!

经过我的测试,本次项目 不能使用sessionStorage ,需要使用localStorage,因为sessionStorage不方便,客户使用时,会遇到很多问题,导致售后量很大。

我今天测试sessionStorage 发现,在a.html存入后,在b.html无法获取到,而localStorage 却可以。举例:

这个时候,通过浏览器访问 left.html

后来经过百度发现了这样的一篇文章: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会使用上不方便,比如有一些情况下,客户会复制网址然后直接新建一个选项卡,粘贴网址进行打开,这个时候 因为不是一个session了 , 又得让客户登录,那么客户登录后,就会存在2个sessionStorage里的两个token,两个token的有效期又不一样,可能会造成 混乱 频繁让客户登录 类似聚石塔的后台 极为不便,所以实际使用中就用 localStorage 禁用 sessionStorage 

原文地址:https://www.cnblogs.com/del88/p/12989580.html