vue实践-多标签页共享sessionstorage

背景：新入手了vue，一路摸索，成功的完成了一个简易的系统；但是在用户登录验证这块出现了问题：
在一个标签页登录后，将页面url拷贝到新的页面中访问，发现又自动跳转到登录界面；
经过一番努力，发现是因为前端的自校验用户信息存储在sessionstorage中，而sessionstorage是针对单标签页的，因此就有了这篇文章，共享sessionstorage。
看了很多博客，有详细的方法的，但因为是小白入门，因此也不知道怎么调用对应的方法，因此做一个详细记录。

实践

方法原理：

1. 通过localstorage的改变事件，监听标志位的改变；
2. 将sessionstorage中的内容读取写入localstorage，再移除，触发需要传递的信息的localstorage改变事件；
3. 最终将需要传递的信息写入新页面的sessionstorage中；

具体操作：
在main.js中加入如下代码块即可：

// 1.  触发标志位改变事件
window.localStorage.setItem(constant.SESSION_FLAG, Date.now().toString())
window.addEventListener("storage", function(event){
    if(!event.newValue){
        return;
    }
    // 2. 监听标志位改变事件
    if(event.key === constant.SESSION_FLAG){
    	// 3. 触发传递信息的改变事件
        localStorage.setItem("storeSessionData", sessionStorage.getItem(constant.SESSION_ID))
        localStorage.removeItem("storeSessionData")
    } else if (event.key === 'storeSessionData') { // 4. 监听 传递信息 的改变事件
        sessionStorage.setItem(constant.SESSION_ID, event.newValue)
    }
})

该方法主要还是利用了window事件监听的方式实现的，不局限于vue；仅项目实现通过vue，这里提供一种完整的嵌入方式。

疑问：
为什么在第三步时可以获取到sessionstorage中的值呢？
增加打印，测试结果：

1. 在原始标签页中，3,4步骤均有进入，即同页面进行了更新；
2. 在新标签页中，仅步骤4有进入，即只监听到了 storeSessionData改变事件；

结论：机制感觉还是有些不明白，不过感觉大体应该是通过localstorage的全局特性完成了sessionstorage的共享；

增加打印的代码：

window.localStorage.setItem(constant.SESSION_FLAG, Date.now().toString())
window.addEventListener("storage", function(event){
    if(!event.newValue){
        return;
    }
    if(event.key === constant.SESSION_FLAG){
        localStorage.setItem("storeSessionData", sessionStorage.getItem(constant.SESSION_ID))
        console.log('sessionStorage.getItem(constant.SESSION_ID):' + sessionStorage.getItem(constant.SESSION_ID))
        localStorage.removeItem("storeSessionData")
    } else if (event.key === 'storeSessionData') {
        console.log('event.newValue:' + event.newValue)
        sessionStorage.setItem(constant.SESSION_ID, event.newValue)
    }
})