- Cookie: 浏览器内置的存储机制,容量约 4KB,可设置有效期、域名、路径,支持 HttpOnly/Secure 等安全属性,请求时会自动携带到对应域名的接口中。
- LocalStorage: HTML5 新增的本地存储机制,容量约 5-10MB,永久存储(除非手动删除),仅在前端通过 JS 访问,不会自动携带到请求中。
- SessionStorage: 仅会话期间有效（关闭标签页后失效），安全性与 LocalStorage 一致（易受 XSS 攻击），适合临时登录场景（如一次性操作、游客身份），非主流选择。
安全性对比
| 安全维度 | Cookie（配置安全属性后） | localStorage |
|---|---|---|
| 防 XSS 攻击 | ✅ 支持 HttpOnly 属性，禁止 JavaScript 访问，避免恶意脚本窃取 Token |
❌ 完全暴露给 JavaScript，若页面存在 XSS 漏洞，Token 极易被恶意脚本窃取 |
| 防 CSRF 攻击 | ⚠️ 默认随请求自动发送，需额外配置（如 SameSite=Strict/Lax）才能有效降低 CSRF 风险 |
✅ 不自动随请求发送，需前端显式添加，天然规避 CSRF 攻击 |
| 数据篡改风险 | ✅ 支持 Secure 属性（仅 HTTPS 传输），可防止中间人窃听/篡改；配合签名可进一步防伪造 |
❌ 仅存储于前端，无传输保护机制；若被篡改（如通过 XSS），易导致身份伪造 |
| 传输机制 | 自动随 HTTP 请求发送（需注意路径、域、Secure、SameSite 等属性） | 不自动传输，需通过 JavaScript 手动读取并附加到请求（如通过 Authorization 头） |
| 适用建议 | 适合存储敏感凭证（如 Session ID、Token），配合 HttpOnly + Secure + SameSite 使用更安全 | 适合存储非敏感数据；若存 Token，需确保无 XSS 漏洞，否则风险极高 |
总结：
- 安全性优先：推荐使用 HttpOnly + Secure + SameSite=Strict/Lax 的 Cookie 存储认证 Token。
- 避免 localStorage 存 Token：除非能完全杜绝 XSS，否则极易被窃取。
- CSRF 与 XSS 是权衡：Cookie 有 CSRF 风险但可配置防御；localStorage 无 CSRF 但 XSS 风险更高。