sessionStorage多窗口状态共享机制解析

正文

在闲暇浏览时，偶然遇到一个关于sessionStorage存储机制的问题。回顾相关知识后，发现之前的理解存在盲区，因此决定查阅官方文档以彻底厘清这一概念。

引用 MDN 中对 sessionStorage 和 localStorage 的解释

sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。

localStorage 同样的功能，但是在浏览器关闭，然后重新打开数据仍然存在。

两者的核心区别在于数据的生命周期。然而，除了存储时长不同，是否还存在数据共享层面的差异？既然涉及数据存储，就必然涉及数据共享问题。对于localStorage，其共享性是众所周知的；但对于sessionStorage，在本文探讨之前，我倾向于认为它无法实现跨窗口共享。

再去 MDN 中查找对 sessionStorage api 的详细描述：

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

描述中提到的“复制”一词引起了注意。这是否意味着存在某种共享机制？为了验证这一猜想，进行了实际测试。

创建一个 storage_index1.html 和 storage_index2.html：

<!-- storage_index1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <button class="btn">打开同源页面</button>
</head>
<body>
<script>
    window.sessionStorage.setItem('sessionStorage_page1',11)
    let oBtn = document.querySelector('.btn')
    oBtn.onclick = function(){
       window.open("storage_index2.html")
    }
</script>
</body>
</html>

<!-- storage_index2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  console.log( window.sessionStorage.getItem('sessionStorage_page1') )
</script>
</body>
</html>

在页面1中创建一个会话存储，添加一个按钮，点击打开同源页面2，在页面2中根据 key 获取值。

action1：分别打开两个页面（页面2不是通过按钮打开的）

在action1的场景下，页面2无法获取页面1中的值。这是因为对于两个页面而言，它们都是独立开启的新会话，彼此互不影响，因此页面2自然无法读取页面1的数据。

action2：打开页面1，从页面1中点击按钮打开页面2

这种操作模式下，两个页面似乎能够共享数据。但为了严谨起见，进一步验证：在页面1中修改现有数据，并新增一条sessionStorage数据，然后检查页面2中是否能获取到更新后的数据。

    // storage_index1.html
    window.sessionStorage.setItem('sessionStorage_page1',22)
    window.sessionStorage.setItem('sessionStorage_page11',33)

    // storage_index2.html
    console.log( window.sessionStorage.getItem('sessionStorage_page1') )
    console.log( window.sessionStorage.getItem('sessionStorage_page11') )

结果显示，页面2的缓存内容与页面1并不一致。回顾前述描述：在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文。这就解释了现象：只有通过窗口或标签页从原页面打开的同源页面，才会“暂时”复制原页面的sessionStorage作为初始状态。一旦新页面建立，双方的数据变化便互不影响，各自独立。

综上所述：多窗口之间的sessionStorage在逻辑上是不共享状态的，但在特定场景下（即通过新窗口/标签页打开同源页面时），新页面会复制原页面的sessionStorage作为初始副本。此后，两个窗口的数据操作相互独立，无关联。

以上就是sessionStorage存储时多窗口之前能否进行状态共享解析的详细内容，更多关于sessionStorage存储状态共享的资料请关注本站其它相关文章！