跨浏览器标签同步storage

12 阅读1分钟

项目中遇到一个问题,新开发的子应用需要接入总项目,协议、域名、端口号与总项目一致,总项目的登录信息存储在sessionStorage里面,但是当单独打开子应用某个url时,拿不到sessionStorage,以下是代码展示,直接复制在入口页面即可:

if (!sessionStorage.length) 
   { localStorage.setItem('getSessionStorage', Date.now());
} 
window.addEventListener('storage', e => {
  if (e.key === 'getSessionStorage') {
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    localStorage.removeItem('sessionStorage');
  } else if (e.key === 'sessionStorage' && !sessionStorage.length) {
    const data = JSON.parse(e.newValue);
    for (const key in data) {
      if (Object.hasOwnProperty.call(data, key)) {
        sessionStorage.setItem(key, data[key]);
      }
    }
  }
});