Cookie 与 sessionStorage 的区别与用法，解决浏览器多开，cookie覆盖问题。

Cookie 与 sessionStorage 的区别与用法​ 今天在写项目的时候测试发现个bug,应该是全栈萌新都会遇到。业务场景如下当前一个浏览器同时登录10个不同的账号访问你的服务器应用其中有一个退出了其他的用户都退出了。这是个很明显的bug之前做的时候只是一个浏览器测试没发现这个问题。产生这个原因如下 前端请求拦截和响应在做处理的时候是基于cookie做的处理导致的至于cookie的特点用法后边说。因为用了cookie在当前浏览器共享了信息导致的cookie的作用域在同源所有标签页/窗口共享存储也是最久的。我在登录的时候把需要认证的东西放在cookie,直接在 Header 中读取 cookieconst userRoleCookie useCookie(userRole)这样干导致的。所有后边考虑到了一个浏览器可能登录多个用户必须隔离所以做了隔离用sessionStorage解决了。那么sessionStorage的法就是解决上边的业务场景的主要是做隔离单页应用的。这两个没有谁好谁坏不同场景需求不同。一、核心区别速查表对比维度CookiesessionStorage存储大小约 4KB约 5-10MB生命周期可设置过期时间Expires/Max-Age标签页关闭即清除作用域同源所有标签页/窗口共享单个标签页独立隔离发送机制每次 HTTP 请求自动携带Cookie头不会自动发送需手动读取放在请求头服务端访问✅ 服务端可直接读取HttpServletRequest❌ 服务端无法直接读取安全性可设置HttpOnly防止 XSS 读取易受 XSS 攻击无 HttpOnly 选项同标签页刷新✅ 保留✅ 保留关闭浏览器✅ 保留未过期前❌ 全部清除跨标签页通信✅ 可共享被覆盖是共享的代价❌ 不可共享这正是隔离的优势使用场景服务端认证、会话标识、偏好设置前端临时状态、单页应用隔离认证、多标签页独立登录二、为什么项目需要从 Cookie 切换到 sessionStorage问题复现流程步骤使用 Cookie❌ 错误使用 sessionStorage✅ 正确用户A在标签页1登录Cookie 存入 authKey_AsessionStorage标签页1存入 authKey_A用户B在标签页2登录Cookie 被覆盖为 authKey_BsessionStorage标签页2独立存入 authKey_B用户A点击操作❌ 请求携带 authKey_B认证失败✅ 请求携带 authKey_A认证成功用户B退出❌ Cookie 被清除标签页1丢失认证✅ 仅清除标签页2的 sessionStorage标签页1不受影响一句话总结Cookie 是浏览器级共享 → 多标签页不同用户会相互覆盖sessionStorage 是标签页级隔离 → 各标签页用户互不干扰。三、sessionStorage 在 Nuxt3 中的完整用法1. 安装 VueUseNuxt3 推荐方案pnpmaddvueuse/nuxt vueuse/core配置nuxt.config.tsexportdefaultdefineNuxtConfig({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(/) } /script3. 请求拦截器读取// request.jsimport{useSessionStorage}fromvueuse/corerequest.interceptors.request.use((config){constauthKeyuseSessionStorage(authKey).valueif(authKey){config.headers[AuthKey]authKey// 手动放入请求头}returnconfig})4. 退出登录清除// 退出或 401 响应时constauthKeyuseSessionStorage(authKey)constuserRoleuseSessionStorage(userRole)constuserNameuseSessionStorage(userName)authKey.valuenulluserRole.valuenulluserName.valuenullrouter.push(/login)四、Cookie 的正确用法什么时候用 Cookie当您需要服务端直接读取认证信息时才用 Cookie// 服务端读取 CookieGetMapping(/user)publicUserDTOgetUser(HttpServletRequestrequest){Cookie[]cookiesrequest.getCookies();for(Cookiecookie:cookies){if(authKey.equals(cookie.getName())){StringauthKeycookie.getValue();// 验证 authKey...}}}典型场景服务端 Session 管理记住登录状态rememberMe需要服务端直接读取的认证信息但如果您用的是前后端分离 Token如 authKey 放在请求头则不应该用 Cookie 存储 authKey而应该用 sessionStorage。五、最佳实践总结存储位置适合存储的内容不适合存储的内容Cookie服务端需要读取的会话ID、偏好设置、rememberMe标识敏感 Token易被 XSS 窃取除非设置HttpOnlysessionStorage前端认证 Token、当前标签页状态、临时表单数据需要跨标签页共享的数据localStorage长期本地缓存、用户设置、主题偏好任何敏感认证信息永不过期易被 XSS 窃取Pinia/Vuex全局状态管理配合 sessionStorage 持久化无内存存储刷新即失六、您的项目改造清单文件修改内容request.jsuseCookie(authKey)→useSessionStorage(authKey)登录页面useCookie(authKey).value key→authKey.value key响应拦截器 401useCookie(authKey).value null→authKey.value null退出逻辑同上清除 sessionStorage后端无需修改请求头AuthKey不变七、关键注意事项useSessionStorage只在客户端可用不要在服务端渲染时调用Nuxt 中在onMounted或拦截器中使用是安全的。useCookie和useSessionStorage在 Nuxt3 中的行为不同useCookie是 Nuxt 内置的 SSR 友好 Cookie 管理useSessionStorage是 VueUse 提供的客户端存储封装改造后同一个浏览器的多个标签页可以独立登录不同用户互不干扰。关闭标签页后sessionStorage 自动清除无需手动清理更安全。