【图解】如何同步 sessionStorage

问题描述

同时打开两个页面，Tab A 中的 sessionStorage 改变，需要更新到 Tab B 中

解决方案

代码仓库: Github Repo

Storage

当 Tab A 更新 sessionStorage 时，将 sessionStorage 存储到 localStorage 中 

localstorage.setItem("session-storage", JSON.stringfy(sessionStorage));

localStorage 的更新，会触发 Tab B 的 onstorage 事件，此时读取 localStorage 的 session-storage ，将 session-storage 数据更新到 sessionStorage 中

const ss = JSON.parse(localStorage.getItem("session-storage") ?? "{}");
Object.entries(ss).forEach(([key, value]) => {
    sessionStorage.setItem(key, value);
});

SharedWorker

1. Tab A 更新 sessionStorage 时，将 sessionStorage 保存至 SharedWorker
2. Tab B 向 SharedWorker 发送获取 data 的指令（就是触发 SharedWorker 的 postMessage)
3. SharedWorker 向 Tab B 发送数据
4. Tab B 更新 sessionStorage

// SharedWorker
let data = '{}';
self.onconnect = (e) => {
  const [port] = e.ports;
  port.onmessage = (event) => {
    const d = JSON.parse(event.data);
    if (d.type === 'sync') {
      port.postMessage(data);
    } else {
      data = event.data;
    }
  };
}