在了解cookie和sessionStorage的时候,发现了一个问题,cookie是关闭浏览器的时候失效,而sessionStorage是在关闭页面的时候就失效了。这个问题需要好好想一想~
浏览器会话
当未设置cookie的失效时间,关闭浏览器对cookie失效,我们可以把这当作一个浅拷贝,所有同源页面引用的都是一个地址的数据,所以可以在不同tab页保持一致。
页面会话
sessionStorage关闭页面就失效了,下面是MDN上对于sessionStorage的理解,让我们好好理解一下:
- 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
- 新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文
- 打开多个相同的 URL 的 Tabs 页面,会创建各自的
sessionStorage。 - 关闭对应浏览器标签或窗口,会清除对应的
sessionStorage。
在这段描述中比较难以理解的是第二段话,这里其实可以理解为通过新标签或窗口打开一个页面时(比如<a target="_blank" />, window.location.href,window.open),可以当作对当前的页面进行一个深拷贝,将当前页面的sessionStorage复制一份到下一个页面,但是在下一个页面修改sessionStorage对上一级页面却是无效的。
<html>
<body>
<div onclick="toNew()">
demo1
</div>
<!-- <a href='D:\demo2.html' target="_blank">跳转demo2</a> -->
<button onclick="toNew()">button</button>
</body>
</html>
<script>
sessionStorage.setItem('test', 'test')
function toNew() {
window.open('D:\/demo2.html', 'demo2');
}
</script>
用一个很小的例子去实践一下,但是发现当我们用a链接打开的时候并没有复制上级页面的sessionStorage,但是用window.open方法打开新链接的时候复制了上级页面的sessionStorage。这就是不同浏览器对于这个特性的实现了,不同浏览器可能实现的程度是不同的。