首先介绍一下背景
sessionStorage 属性允许你访问一个,对应当前源的 sessionStorage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
- 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
- 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文, 这点和 session cookies 的运行方式不同。
- 打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage。
- 关闭对应浏览器标签或窗口,会清除对应的 sessionStorage。
注意
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文, 这点和 session cookies 的运行方式不同。
此处用了复制
举个例子
- 现有页面A,在页面A中执行
window.sessionStorage.setItem("pageA_1","123")
- 在页面中有个button按钮,点击按钮触发 window.open(“同源页面”),现得到新开的页面B,在B中执行
window.sessionStorage.getItem("pageA_1") //拿到的结果是 "123"
真的可以共享吗?
- 接下来我们继续测试,在页面A中继续执行
window.sessionStorage.setItem("pageA_1","456") (之前的pageA_1设置的值是 ‘123’ )
window.sessionStorage.setItem("pageA_2","789")
- 在页面B中再次尝试获取:
window.sessionStorage.getItem("pageA_1") //拿到的结果还是 "123" !!!
window.sessionStorage.getItem("pageA_2") //拿到的结果是 null !!!
总结
window.open(“同源页面”)这种方式新开的页面会复制之前的sessionStorage