平常时候使用sessionStorage，只是相当于把他当做临时的缓存，当用户在页面间跳转的时候可以共享数据。

但如果细细分析，sessionStorage还是有一些注意事项的。了解这些，可以避免在项目中出现莫名其妙的问题。

首先引用一段MDN的解释：

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

重新加载就是指刷新，这个刷新包括：

  • window.location.reload()，
  • 点击浏览器的刷新按钮
  • ctrl + R快捷键

其实不仅仅包含以上三个，还包括两种

  • 硬性重新加载，快捷键是ctrl+shift+R
  • 清除缓存并硬性重新加载

以上均不会清空sessionStorage

其次恢复页面是指比如你用任务管理器杀掉浏览器进程，然后再次打开浏览器，这时候浏览器会提示你是否恢复页面，这个时候你仍旧可以拿到session。

第二句话

新标签页和窗口正常打开都是新的sessionStorage。也就是说，新的标签页或窗口均不会使用上一个标签页或窗口的sessionStorage。

此外顶级浏览会话是指如果内部嵌套了iframe，当iframe加载的时候，是可以使用当前标签或窗口的sessionStorage的。

第三句话

更明确的说明了各个标签页不共享sessionStorage，即使是相同的url。

第四句话

指明了session会在关闭浏览器或标签页的时候被清除

补充

还有以下两种情况值得注意

  • window.open 会打开一个新的标签页，但是会共享sessionStorage
  • <a _target=“blank” >也是会共享sessionStorage的。