sessionStroage 多标签页共享

多标签页共享sessionstorage 可以用来共享用户登录信息

const initShareSessionStroage = () => {
  const hashMap = new Map([
    // 将sessionstorage 传递
    [
      'getSessionStorage',
      () => {
        console.log(132)
        localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
        localStorage.removeItem('sessionStorage')
      },
    ],
    [
      'sessionStorage',
      (newValue: string | null) => {
        if (sessionStorage.length) return
        if (newValue) {
          var data = JSON.parse(newValue)
          for (const key in data) {
            sessionStorage.setItem(key, data[key])
          }
        }
      },
    ],
    [
      'clearOther',
      () => {
        localStorage.setItem('clearMyself', Date.now().toString())
        localStorage.removeItem('loginOut')
        sessionStorage.clear()
        localStorage.clear()
      },
    ],
    [
      'clearMyself',
      () => {
        sessionStorage.clear()
        localStorage.clear()
      },
    ],
  ])
  try {
    if (!sessionStorage.length) localStorage.setItem('getSessionStorage', Date.now().toString())
    window.addEventListener('storage', (event: StorageEvent) => event.key && hashMap.get(event.key)?.(event.newValue))
  } catch (error) {
    console.log(error)
  }

  /**
   * 1、首先第一个标签页判断sessionstorage的长度 不存在的话调用一下local的setitem
   * 2、然后添加storage监听事件
   * 3、当在打开新的标签页面时候
   * 4、会触发localStorage.setItem('getSessionStorage', Date.now())
   * 5、然后事件进入到第一个标签页触发localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)) 并将sessionstorage里面的值存储起来
   * 6、事件到了第二个标签页 传递sessionstorage的值 存储起来
   * 7、事件到了第一个标签页 localStorage.removeItem('sessionStorage') 移除掉多余的值
   * 8、又到了第二个标签页 不进入任何判断 到此结束
   * 9、清除信息调用 localStorage.setItem('clearOther', Date.now())
   * */
}

整理不易，有问题请留言，如果可以，请为本文留下一个小赞。