掘金文章归档 · 第 78 篇 Web Storage · 浏览器存储

localStorage 和 sessionStorage 的跨页面通讯异同点

window.open 同源页面场景下，引用共享 vs 复制快照的实测结论

原文作者：随意_（掘金） | juejin.cn/post/7424126043705933850 | 发布于 2024-10-11 | 阅读 336 · 约 2 分钟

0背景

项目场景需要缓存 localStorage 或者 sessionStorage 的时候，涉及到跨页面传值通信。以 a 页面通过 window.open 打开的同源页面 b 页面为例，测试下 localStorage 或者 sessionStorage 的页面通信。

以下所有结论基于两点前提：

同源；
window.open 打开。

1localStorage 跨页面通信验证

创建 a 页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button onclick="setaa()">设置aa</button>
  <button onclick="setbb()">设置bb</button>
  <button onclick="opentest()">打开同源页面</button>
  <script>
    const setaa = () => {
      localStorage.setItem('aaa', 'aaa')
    }

    const setbb = () => {
      localStorage.setItem('bbb', 'bbb')
    }

    const opentest = () => {
      window.open('./test2.html', "_blank")
    }
  </script>
</body>

</html>

localStorage 通信验证流程

点击"设置 aa"button；
点击"打开同源页面"，打开新页面；
新页面输入 localStorage.getItem("aaa")，新页面可以获取到对应缓存；
打开原始页面，点击"设置 bb"，再打开新页面输入 localStorage.getItem("bbb")，新页面可以获取到对应缓存；
新页面执行 localStorage.clear()，原始页面执行 localStorage.getItem("aaa")，原始页面的 localStorage 同样清空。

2sessionStorage 跨页面通信验证

同样的流程，创建原始页面代码如下（原文此处误写为 localStorage，按代码实际使用 sessionStorage 修正标注）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button onclick="setaa()">设置aa</button>
  <button onclick="setbb()">设置bb</button>
  <button onclick="opentest()">打开同源页面</button>
  <script>
    const setaa = () => {
      sessionStorage.setItem('aaa', 'aaa')
    }

    const setbb = () => {
      sessionStorage.setItem('bbb', 'bbb')
    }

    const opentest = () => {
      window.open('./test2.html', "_blank")
    }
  </script>
</body>

</html>

sessionStorage 通信验证流程

点击"设置 aa"button；
点击"打开同源页面"，打开新页面；
新页面输入 sessionStorage.getItem("aaa")，新页面可以获取到对应缓存；
打开原始页面，点击"设置 bb"，再打开新页面输入 sessionStorage.getItem("bbb")，新页面不可以获取到对应缓存；
新页面执行 sessionStorage.clear()，原始页面执行 sessionStorage.getItem("aaa")，sessionStorage 没有清空。

3试验结论

sessionStorage 和 localStorage 在新页面打开前已经存在的缓存，新打开的页面同样可以获取到对应缓存；
新页面打开后，原始页面设置新的 localStorage，新打开页面同样可以获取到；
新页面操作 localStorage，也会影响到原始页面的 localStorage；
新页面打开后，原始页面设置新的 sessionStorage，新打开页面获取不到；
新页面操作 sessionStorage，不会影响到原始页面的 sessionStorage。

验证场景	localStorage	sessionStorage
新页面前已有缓存	可获取	可获取（复制一份）
打开后原始页新增缓存	新页面可获取	新页面获取不到
新页面操作（如 clear）	影响原始页面	不影响原始页面

4总结

📌 localStorage 是"引用"：原始页面和新页面操作均会影响对应的数据。

⚠️ sessionStorage 是"复制"：原始页面和新页面操作均不会影响彼此的缓存，只是新开页面的时候复制了一份缓存。