Window.sessionStorage

Posted 2021-09-15 littleWang

sessionStorage 属性允许你访问一个，对应当前源的 sessionStorage 对象。

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
• 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
• 关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

语法

// 保存数据到 sessionStorage
sessionStorage.setItem(\'key\', \'value\');
​
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem(\'key\');
​
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem(\'key\');
​
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

关于sessionStorage的一些问题

1.同样的url链接在浏览器的不同窗口可以共享sessionStorage的数据么？

不可以，虽然他们的域名什么都相同，但是对于浏览器标签来说他们是不同的窗口，他们之间的数据是无法进行沟通的。

2.sessionStorage是否传递给不同的窗口？

可以。一般有两种方式，一种是标签打开，一种是window.open的方式打开。

• 标签的方式需要注意的是在chrome的89版本之后必须要带rel="opener"

   <!--在新版chrome无法带过去sessionStorage的值-->
   <a href="index.html" target = \'_blank\'>跳转新页面</a>
   <!--在新版chrome可以带过去sessionStorage的值-->
   <a href="index.html" target = \'_blank\' rel="opener">跳转新页面1</a>

• window.open可以打开并且可以将sessionStorage带过去。

   window.open(\'index.html\')

3.在新的窗口改变新的sessionStorage，老窗口的值会对应发生变化么？

不会，因为相当于是将老窗口当前的状态值深拷贝了一份给新窗口，之后再各自的窗口进行操作的时候是不会发生变化。