document.cookie 是分号分隔的字符串而非键值对象，读写需手动解析与拼接；存敏感信息如 token 易受 XSS 攻击，应优先用 HttpOnly + Secure Cookie 配合 Authorization 请求头；前端状态推荐 localStorage 或 sessionStorage。
JavaScript 中 document.cookie 的基本读写逻辑
原生操作 Cookie 并不复杂，但容易误以为它是类似 localStorage 的键值对对象——实际上它是一段用分号分隔的字符串，每次读取都得手动解析，写入也得拼接完整格式。
写入示例：document.cookie = "token=abc123; path=/; expires=Wed, 01 Jan 2025 00:00:00 GMT; Secure; HttpOnly";
注意：这里 HttpOnly 是服务端设置的，JS 无法通过 document.cookie 写入该标志；Secure 表示仅在 HTTPS 下发送，JS 可以声明，但无效（浏览器忽略）。
- 必须显式指定
path，否则默认为当前路径，导致跨路由读不到 -
expires或max-age缺失时，Cookie 变成会话级（关闭浏览器即失效） - 中文或特殊字符需先
encodeURIComponent()，否则可能截断或报错
为什么不能用 document.cookie 存 token 或敏感状态
因为 document.cookie 暴露在 JS 环境中，XSS 攻击可直接窃取。哪怕加了 HttpOnly，那 JS 就根本读不到——这恰恰说明：如果 JS 需要读写，它就一定不是 HttpOnly。
-
前端存 token 做自动鉴权？优先走
Authorization: Bearer xxx请求头，token 由后端下发并设为HttpOnly+Secure - 若必须前端维护状态（如语言偏好、主题），用
localStorage更合适，且无需担心过期逻辑 - 需要服务端参与的状态（如登录态），Cookie 仅作传输载体，真实校验和续期全由后端控制
封装一个安全可用的 Cookie 工具函数
避免每次手动拼字符串出错，建议封装最小可用函数，只处理编码、路径、过期时间等基础项，不尝试模拟对象 API。
function setCookie(name, value, options = {}) {
let cookieStr = `${name}=${encodeURIComponent(value)}`;
if (options.expires) cookieStr += `; expires=${options.expires.toUTCString()}`;
if (options.maxAge) cookieStr += `; max-age=${options.maxAge}`;
if (options.path) cookieStr += `; path=${options.path}`;
if (options.domain) cookieStr += `; domain=${options.domain}`;
if (options.secure) cookieStr += '; secure';
document.cookie = cookieStr;
}
function getCookie(name) {
const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
return match ? decodeURIComponent(match[2]) : null;
}
- 不支持
SameSite自动注入，需手动传options.sameSite = 'Strict'并拼进字符串 - 删除 Cookie：调用
setCookie('name', '', { expires: new Date(0) }) - 不要试图用正则匹配多个同名 Cookie，浏览器只返回第一个匹配项
现代替代方案比 Cookie 更适合前端状态管理
除非明确需要服务端读取或依赖浏览器自动携带（如传统表单提交），否则大多数用户状态不需要 Cookie。
立即学习“Java免费学习笔记（深入）”；
- 纯前端状态（如折叠菜单、暗色模式）：用
localStorage+useEffect（React）或事件监听同步 - 需要服务端感知但又不想暴露敏感字段：用短时效
sessionStorage存非敏感标识，后端用该标识查 session - SSR/SEO 场景下需首屏读取状态：服务端渲染时注入到
window.__INITIAL_STATE__，前端优先读它
真正难的不是怎么写 Cookie，而是判断「这个状态到底该不该放 Cookie 里」——多数时候答案是否定的。
