前端本地存储引发的小矛盾

前言

最近项目刚好负责一个用户模块，出现一个问题：同一浏览器的不同标签页打开的同一域名下sessionStorage里面的值居然共享了？？？？
省流小助手

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文, 这点和 session cookies 的运行方式不同。
• 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
• 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage

问题的起因

由于之前一开始没统一好，将用户登录成功后的token值存在了cookie里面，cookie在同一域名下是共享数据的，导致拿到了新的token值刷新了不同标签页下同一项目的sessionStorage里面的值。

总结

一开始一度以为，vuex的持久化插件vuex-persistedstate 里面做了处理，才导致不同标签页下的同一项目的sessionStorage里面的数据共享了。结果是js-cookie 这个插件token存在cookie里面了，实在抱歉！