cookie 更安全可控且自动携带，适合存敏感凭证；webstorage 容量大但易受 xss 攻击，需手动传 token，适用于非敏感数据或加密 refresh_token。
在鉴权场景中，WebStorage（localStorage/sessionStorage）和 Cookie 各有适用边界，不能简单说谁更好——关键看是否需要服务端参与、是否涉及敏感凭证、是否要求自动携带、是否需跨域支持。
安全性：Cookie 更可控，WebStorage 易受 XSS 泄露
Cookie 可设置 HttpOnly 属性，阻止 JavaScript 访问，有效防御 XSS 导致的 token 窃取；而 WebStorage 完全暴露在 JS 环境中，一旦页面存在 XSS 漏洞，localStorage 中的 access_token 几乎必然被读取。
Cookie 还支持 Secure 和 SameSite 属性：Secure 保证仅 HTTPS 传输，SameSite（如 Lax 或 Strict）可缓解 CSRF 攻击；WebStorage 没有这类服务端强制策略，安全依赖前端代码逻辑和开发规范。
通信机制：Cookie 自动随请求发送，WebStorage 需手动注入
后端鉴权依赖请求头（如 Authorization）或 Cookie 字段时：
- Cookie 天然满足：浏览器自动附加到同源（或符合 SameSite 规则）的每个请求，服务端可直接解析验证；
- WebStorage 存储的 token 必须由前端在每次请求前手动读取，并通过 Authorization: Bearer xxx 或自定义 header（如 X-Auth-Token）传入，遗漏即鉴权失败；
- WebSocket、fetch、XMLHttpRequest 均不自动携带 WebStorage 数据，必须显式处理。
存储容量与生命周期：WebStorage 更灵活，Cookie 更受限
Cookie 单个域名上限通常为 4KB，且每次请求都重复传输，增加带宽开销；WebStorage 提供约 5–10MB 容量，不参与网络传输，适合存较大数据（如用户权限列表、刷新 token 缓存）。
生命周期方面：
- sessionStorage 会话级，关闭标签页即清空，适合临时登录态；
- localStorage 持久化，适合“记住我”类场景，但需配合后端 token 过期策略；
- Cookie 可设 max-age 或 expires 控制过期，也可设为 session cookie（关闭浏览器失效），灵活性高。
跨域与服务端协作：Cookie 天然适配传统鉴权流，WebStorage 需额外设计
若使用基于 Session 的服务端鉴权（如 Express + express-session），Cookie 是标准载体；JWT 场景下，虽可将 token 存 localStorage 并手动传 header，但遇到以下情况会变复杂：
- 需要后端刷新 token 时，若 refresh_token 存 localStorage，前端必须主动调用刷新接口并更新本地 token；
- 登出需同时清除 localStorage 和服务端 session，否则 token 仍可能有效；
- 跨子域（如 a.example.com 和 b.example.com）共享鉴权态，Cookie 可通过 domain=.example.com 设置实现，WebStorage 则需 postMessage + iframe 等方案，成本高且易出错。
实际推荐组合：用 HttpOnly Cookie 存放短期有效的 access_token（或 session id），用 localStorage 存非敏感元数据（如用户名、主题偏好）或加密后的 refresh_token（需谨慎）；若必须用 WebStorage 存 access_token，务必启用 CSP、严格过滤输入、避免内联脚本，并定期审计 XSS 风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
