企业官网建设流程全解析

Cookie 与 sessionStorage 的区别与用法

​ 今天在写项目的时候测试发现个bug,应该是全栈萌新都会遇到。业务场景如下：

当前一个浏览器，同时登录10个不同的账号，访问你的服务器应用，其中有一个退出了，其他的用户都退出了。这是个很明显的bug，之前做的时候只是一个浏览器测试没发现这个问题。产生这个原因如下： 前端请求拦截和响应，在做处理的时候是基于cookie做的处理导致的，至于cookie的特点用法后边说。因为用了cookie在当前浏览器共享了信息导致的，cookie的作用域在同源（所有标签页/窗口共享），存储也是最久的。我在登录的时候把需要认证的东西放在cookie,直接在 Header 中读取 cookieconst userRoleCookie = useCookie('userRole')这样干导致的。所有后边考虑到了一个浏览器可能登录多个用户，必须隔离所以，做了隔离用sessionStorage解决了。那么sessionStorage的法就是解决上边的业务场景的，主要是做隔离，单页应用的。这两个没有谁好谁坏，不同场景需求不同。

一、核心区别速查表

二、为什么项目需要从 Cookie 切换到 sessionStorage？

问题复现流程

一句话总结：Cookie 是浏览器级共享 → 多标签页不同用户会相互覆盖；sessionStorage 是标签页级隔离 → 各标签页用户互不干扰。

三、sessionStorage 在 Nuxt3 中的完整用法

1. 安装 VueUse（Nuxt3 推荐方案）

pnpmadd@vueuse/nuxt @vueuse/core

配置nuxt.config.ts：

exportdefaultdefineNuxtConfig({modules:['@vueuse/nuxt']})

2. 登录页面存储

<script setup> import { useSessionStorage } from '@vueuse/core' // 创建响应式引用，每个标签页独立 const authKey = useSessionStorage('authKey', '') const userRole = useSessionStorage('userRole', '') const userName = useSessionStorage('userName', '') const handleLogin = async () => { const response = await login(form) const { authKey: key, role, userName: name } = response.data // 存储到当前标签页 authKey.value = key userRole.value = role.toString() userName.value = name await router.push('/') } </script>

3. 请求拦截器读取

// request.jsimport{useSessionStorage}from'@vueuse/core'request.interceptors.request.use((config)=>{constauthKey=useSessionStorage('authKey').valueif(authKey){config.headers['AuthKey']=authKey// 手动放入请求头}returnconfig})

4. 退出登录清除

// 退出或 401 响应时constauthKey=useSessionStorage('authKey')constuserRole=useSessionStorage('userRole')constuserName=useSessionStorage('userName')authKey.value=nulluserRole.value=nulluserName.value=nullrouter.push('/login')

四、Cookie 的正确用法（什么时候用 Cookie？）

当您需要服务端直接读取认证信息时，才用 Cookie：

// 服务端读取 Cookie@GetMapping("/user")publicUserDTOgetUser(HttpServletRequestrequest){Cookie[]cookies=request.getCookies();for(Cookiecookie:cookies){if("authKey".equals(cookie.getName())){StringauthKey=cookie.getValue();// 验证 authKey...}}}

典型场景：

• 服务端 Session 管理
• 记住登录状态（rememberMe）
• 需要服务端直接读取的认证信息

但如果您用的是前后端分离 + Token（如 authKey 放在请求头），则不应该用 Cookie 存储 authKey，而应该用 sessionStorage。

五、最佳实践总结

六、您的项目改造清单

七、关键注意事项

1. useSessionStorage只在客户端可用，不要在服务端渲染时调用（Nuxt 中在onMounted或拦截器中使用是安全的）。
2. useCookie和useSessionStorage在 Nuxt3 中的行为不同：
   • useCookie是 Nuxt 内置的 SSR 友好 Cookie 管理
   • useSessionStorage是 VueUse 提供的客户端存储封装
3. 改造后，同一个浏览器的多个标签页可以独立登录不同用户，互不干扰。
4. 关闭标签页后，sessionStorage 自动清除，无需手动清理（更安全）。