赞
踩
先看MDN的描述:
页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookies 的运行方式不同。
打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage。
第一点很好理解,不赘述。第二点,如果是从一个页面打开一个新的窗口或者一个新的 tab 页,那么这个新的页面会复制顶级会话的 sessionStorage。注意是复制,不是引用。第三点也很好理解,在不同的tab输入相同地址访问,得到的sessionStorage是不同的。总结下来就是,判断不同tab是否属于同个会话,看tab的打开方式。网上有很多结论,但是可能过时了,实验一下。测试环境 Windows10 chrome 版本 102.0.5005.115(正式版本) (64 位)
demo1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <h1>demo1</h1> <script> if (sessionStorage.getItem('name')) { alert('数据已存在'); } else { sessionStorage.setItem('name', '张三'); alert(sessionStorage.getItem('name')); } </script> </body> </html>
在两个tab中访问demo1.html,都显示张三,说明新开的页面sessionStorage是新创建的。
以下三点验证了MDN第一点说法。
demo1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <h1>demo1</h1> <ul> <li> <a href="./demo2.html" target="_blank">通过链接跳转空白页</a>,显示null </li> <li> <button onclick="window.open('./demo2.html')">window.open</button>,显示张三 </li> </ul> <script> sessionStorage.setItem('name', '张三'); </script> </body> </html>
demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
</head>
<body>
<h1>demo2</h1>
<script>
var item = sessionStorage.getItem("name");
alert(item);
</script>
</body>
</html>
测试结果
1.通过链接跳转空白页打开demo2.html,显示null,说明新页面创建了新的sessionStorage
2.通过window.open打开demo2.html,显示张三,说明新页面复制了原来的sessionStorage,注意这里是复制,不是引用原来的sessionStorage。可以做如下测试来验证:在新打开的页面控制台存入新的值到sessionStorage,然后在初始页面控制台查看发现并没有找到新存入的值。
demo1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <h1>demo1</h1> <ul> <li> <a href="./demo1.html" target="_blank">通过链接跳转空白页</a>,显示张三 </li> <li> <button onclick="window.open('./demo1.html')">window.open</button>,显示数据已存在 </li> </ul> <script> if (sessionStorage.getItem('name')) { alert('数据已存在'); } else { sessionStorage.setItem('name', '张三'); alert(sessionStorage.getItem('name')); } </script> </body> </html>
这次测试用不同方式打开同个页面,测试结果:
1.通过链接跳转空白页打开demo1.html,显示张三,说明新页面创建了新的sessionStorage
2.通过window.open打开demo1.html,显示数据已存在,说明新页面复制了原来的sessionStorage,这里和测试2中第二种情况类似,可以做类似测试:
经过实验,发现上述结论和这篇文章有所出入,所以建议自己实验,避免环境或者版本差异带来的问题。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。