localStorage和sessionStorage的跨页面通信异同点背景项目场景需要缓存localStorage或

背景

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

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

同源
window.open打开

localStorage

创建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>

localStoraget通信验证流程

点击设置aa button
点击打开同源页面,打开新页面
新页面输入 localStorage.getItem("aaa"),新页面可以获取到对应缓存

打开原始页面，点击设置bb,再打开新页面输入 localStorage.getItem("bbb"),新页面可以获取到对应缓存

新页面执行localStorage.clear()，原始页面执行 localStorage.getItem("aaa"),原始页面的localStorage同样清空

localStorage

同样的流程，创建原始页面代码如下

<!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.getItem("aaa"), sessionStorage没有清空

试验结论

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

总结

localStorage是引用，原始页面和新页面操作均会影响对应的数据
sessionStorage是复制，原始页面和新页面操作均会不影响彼此的缓存，只是新开的时候复制了一份缓存