sessionStorage 多 Tab 页面数据是否互通

什么是 sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

sessionStorage 的页面会话结束，表示当前浏览器 tab 关闭，重新加载(刷新)不影响 sessionStroage 的存储'

sessionStorage 数据是否互通

假设我们有两个页面

a.vue 存储了 s-1

<script setup lang="ts">
sessionStorage.setItem('s-1', 's-1');

const s1 = sessionStorage.getItem('s-1');
const s2 = sessionStorage.getItem('s-2');
</script>

<template>
  <div>{{ s1 || 'null' }}</div>
  <div>{{ s2 || 'null' }}</div>
</template>

b.vue 存储了 s-2

<script setup lang="ts">
sessionStorage.setItem('s-2', 's-2');

const s1 = sessionStorage.getItem('s-1');
const s2 = sessionStorage.getItem('s-2');
</script>

<template>
  <div>{{ s1 || 'null' }}</div>
  <div>{{ s2 || 'null' }}</div>
</template>

当我们在浏览器分别打开 a.vue b.vue 两个 tab 标签，会发现 a.vue 取不到 s-2 的值，同样 b.vue 取不到 s-1 的值

通过上述测试我们可以了解到在同源情况下不同 Tab 之间，相互的 sessionStorage 是互不影响的

特殊情况

<button @click="window.open('b.vue')">window.open打开</button>
<a href="b.vue" target="_blank">a标签打开</a>

如上，我们分别用 window.open 与 a 标签打开一个新的 b.vue 页面，经过测试可以发现 a 标签打开的 b.vue 页面没有 a.vue 的 sessionStorage 数据， 而 window.open 打开的 b.vue 页面有 a.vue 的 sessionStorage 数据。

总结

同源下

• 同一 Tab 下的 sessionStorage 的数据可读写且相互影响。
• 不同 Tab 之间，读写操作独立，互不影响。
  • <a target="_blank"></a> 创建新 Tab 的初始缓存为空
  • window.open 创建新 Tab 会基于原页面的 sessionStorage 拷贝一份
• 当前 tab 关闭则清除当前 tab 的 sessionStorage，不影响其他 tab 标签页的 sessionStorage 数据

如何跨 tab 取到前面页面的 sessionStroage

// 通过自执行函数来确保在新开tab中直接执行
// 方法一：同步已有标签页的sessionStorage数据到新开tab页
(function () {
  // 新打开一个tab标签页并通知其他标签页同步sessionStorage的数据到本标签页
  if (!sessionStorage.length) {
    // 这个调用能触发storage事件，从而达到共享数据的目的
    localStorage.setItem('syncSessionStorage', Date.now());
  }

  // 该事件是核心
  window.addEventListener('storage', function (event) {
    if (event.key == 'syncSessionStorage') {
      // 已存在的标签页会收到这个事件
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');
    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      // 新开启的标签页会收到这个事件
      var data = JSON.parse(event.newValue);
      for (key in data) {
        sessionStorage.setItem(key, data[key]);
      }
    }
  });
})();