vue实践-多标签页共享sessionstorage

最新推荐文章于 2025-09-02 20:26:55 发布

原创

最新推荐文章于 2025-09-02 20:26:55 发布 · 4.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #sessionstorage #共享

本文介绍了一种在Vue项目中解决不同标签页间sessionStorage共享问题的方法。通过使用localstorage的改变事件，监听标志位的变化，并将sessionstorage中的内容同步到新打开的标签页中，实现了用户登录状态的有效保持。

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

实践

方法原理：

通过localstorage的改变事件，监听标志位的改变；
将sessionstorage中的内容读取写入localstorage，再移除，触发需要传递的信息的localstorage改变事件；
最终将需要传递的信息写入新页面的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))
        localStor

最低0.47元/天解锁文章