Open AnnGreen1 opened 3 weeks ago
关于末尾的总结: 通过a标签新开的页面同样也会,原理相同。
而Chrome 89的版本,Stop cloning sessionStorage for windows opened with noopener,而a标签_blank默认 rel="noopener" ,所以a标签需要加入rel=“opener” 而才能像window.open("同源页面")这种方式新开的页面会复制之前的sessionStorage
附上stackoverflow的 链接 stackoverflow.com
一、背景
我:巴拉巴拉。。。(这不是小case嘛,面经都背烂了)
我:可以呀,如果页面中出现了串数据的话,很大概率就是localStorage共享导致的呢。
我:当然不行,每一个窗口之间sessionStorage都是独立的,相互不影响,窗口关闭浏览器就自动销毁了!(斩钉截铁,认真脸)
我:这个。。。。不太确定。。。。待我去查查资料再来。。。😭
由此引出我们今天的主题:
sessionStorage
在同域下的多窗口之间能共享状态吗?二、查阅文档
根据MDN的说法:
sessionStorage
属性允许你访问一个,对应当前源的 sessionStorage
对象。它与localStorage
相似,不同之处在于localStorage
里面存储的数据没有过期时间设置,而存储在sessionStorage
里面的数据在页面会话结束时会被清除。sessionStorage
。sessionStorage
。对于上面的说法,第134点相信都是符合大家认知的,那第二点是啥意思呢?
笔者为了搞懂第二点,接着继续查阅文档。。。
经过一系列的学习 (百度) 之后,笔者发现如果从本页面以新开页签的方式打开一个同域下的新页面,新开的页面会和之前的页面
‘共享’ sessionStorage
。举个实际一点的例子:现有页面A,在页面A中执行
在页面中有个button按钮,点击按钮触发
window.open("同源页面")
,现得到新开的页面B,在B中执行这里的B页面居然是能拿到值的!!!!
现在我终于能对面试官说:多窗口之间
sessionStorage
真的可以共享状态!!三、真的是这样吗?
哎,等等,如果真的能共享数据,那 sessionStorage 不是也会出现串数据的情况吗,我怎么记得平时并不会。。。
接下来我们继续测试,在页面A中继续执行
在页面B中再次尝试获取:
what??? 怎么回事?怎么现在又不‘共享’了呢?
我们现在再次回去理解一下MDN的说法:在该标签或窗口打开一个新页面时会复制顶级浏览会话的上下文作为新会话的上下文
哦~ 原来如此~ 原来只有在本页面中以新页签或窗口打开的同源页面会
‘临时共享’
之前页面的sessionStorage。而且共享这个词似乎也并不怎么准确,准确来说应该叫
复制
更加专业!现在我终于能再次对面试官说:
多窗口之间sessionStorage不可以共享状态!!!但是在某些特定场景下新开的页面会复制之前页面的sessionStorage!!
四、总结
其实不仅
window.open("同源页面")
这种方式新开的页面会复制之前的sessionStorage,通过a标签
新开的页面同样也会,原理相同,在这就不赘述了。五、其他
这里可能有部分同学要问了:如果我就是不想要这种
复制
的效果怎么办呢?这里笔者认为优雅一点的方式是先新建一个空白页面窗口,再将url设置到窗口中的地址栏中去。
最后,希望这篇文章能够帮助到你😁,如果文章中出现有纰漏的地方希望大家积极指正~。
作者:不要秃头啊 链接:https://juejin.cn/post/7076767687828832286 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。