sessionStorage多标签页共享

sessionStorage在不同页面上不是同步共享的，但是我们有时候会将token或者一些登录凭证记录在token里(你肯定要问为什么后端不把token直接写到cookie里，因为他懒…)，所以这里就写一下怎么将不同页面的sessionStorage同步更新

sessionStorage和localStorage区别

localStorage的生命周期是永久的，意思就是如果不主动清除，存储的数据将一直被保存。而sessionStorage顾名思义是针对一个session的数据存储，生命周期为当前窗口，一旦窗口关闭，那么存储的数据将被清空。最后还有一个很主要的区别同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。

解决

所以我们可以借用localStorage的改变来主动修改sessionStorage,这里要用到一个监听事件storage，用于监听localStorage

window.addEventListener("storage", function(event){
//event.key确认修改的locaStorage变化key，event.newValue是修改后的值
  if(event.key == "token"){
    sessionStorage.setItem('token',event.newValue)
  }
});

所以在登陆时直接localStorage.setItem('token','xxxxx'),这样自动设置在了sessionStorage中，需要用到的时候直接sessionStorage.getItem('token'),其实直接使用localStorage来记录登录状态什么的也可以，但是为了关闭页面直接清楚token，所以就在写sessionStorage中了

END~

——解决浏览器复制网址在新的tag里能正常跳转的问题

一、问题描述

        在新的页面打开一个tag粘贴上一个页面的地址时不能正常跳转，直接跳转到了login页面。

二、原因分析

        百度发现是因为sessionStorage和localStorage存储周期不同：

• sesssionStorage：关闭当前浏览器，数据就随之消失
• localStorage：如果不手动清除，数据会一直存在

        此处参考官方文档JavaScript 存储对象 | 菜鸟教程

        和以下博客localstorage和sessionstorage的区别 - 付杰博客、sessionStorage和localStorage有什么区别_火兰的博客-CSDN博客_localstorage和sessionstorage的区别

三、解决办法 

        当我们作比较正规或者较大的项目时，最好不要用localStorage，毕竟通过某些方法是可以将存放的token转化为字符串信息的。那就需要解决sessionStorage不能在页面之间共享信息的问题了，原理主要参考以下文章：

html5——sessionStorage不能跨标签页解决方案-奇奇笔记

思路：

1. 当sessionStorage没有信息时，使用localStorage存储
2. 触发storage事件，并设置监听：localStorage存储当前sessionStorage的token
3. localStorage保存的token变化后，新页面sessionStorage保存新的信息

实现：

        实现过程中会发现一个问题：监听storage事件未执行完就已经判断了登录信息。于是便想到是不是异步的问题，那么就要让这个函数完成之后再进行login。

此处参考：

        sessionStorage不能跨标签页解决方案--vue项目_拷贝程序猿的博客-CSDN博客_sessionstorage不同标签页

 sessionStorage共享（监听storage事件）_MINO吖的博客-CSDN博客_sessionstorage事件

我的实现方法：

 在需要判断login的地方调用

ps：

• localStorage.setItem('getSessionStorage', Date.now())触发的不是新页面而是旧页面的storage（localStorage存的数据只要发生变化就会触发storage，此处由undefined变为date）
• 个人想法，应该有不对或者不完善的地方，仅供参考，欢迎讨论

1、不同浏览器无法共享localStorage和sessionStorage的值。

2、相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage，Cookies值，通过跳转的页面可以共享sessionStorage值。

3、关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值，跳转有多种方式：

    (1)  <a href="同源页面" target="_self">跳转</a>    //原窗口

    (2) <a href="同源页面" target="_blank">跳转</a>  //新开窗口

    (3) window.location.href = '同源页面'      //原窗口

    (4) window.location.replace('同源页面')   //原窗口

    (5) window.open('同源页面')       //新开窗口

    (6) this.$router.push({path: '同源页面'})   //通过路由跳转共享值

app端通过原生方法更换webView实现跳转，这种方式不能共享sessionStorage，原窗口跳转的页面传递sessionStorage，改变存储值会相互影响，新开窗口跳转方式传递sessionStorage，改变存储值互不影响