直接读写 document.cookie 是最简方式，但需手动编码解码、显式指定 path/domain、处理 HttpOnly/Secure/SameSite 限制，且无法删除单项；适合存轻量服务端需校验数据，复杂状态应优先用 localStorage 或框架方案。
直接读写 document.cookie 是最简方式，但有严重限制
JavaScript 没有原生 Cookie 类或 setCookie() 函数，所有操作都通过 document.cookie 这个可读可写的字符串属性完成。它不是对象，也不是数组，而是一个带分隔符的键值对拼接串——这导致手动解析极易出错。
常见错误现象：
• 修改 document.cookie = "a=1" 后，document.cookie 仍返回空字符串（未设置 domain 或 path 导致写入失败）
• 读取时拿到一长串如 "a=1; b=2; c=3"，却用 .split(";") 粗暴分割，忽略空格和 = 前后空格导致解析失败
• 设置了 HttpOnly 的 cookie，JS 完全读不到（这是安全设计，不是 bug）
- 必须显式指定
path=/才能在整个站点读写（默认是当前路径，常导致跨路由失效） - 若后端设置了
Secure或SameSite，前端写入时也要同步带上，否则可能被浏览器拒绝 - 每次赋值
document.cookie都是「新增或覆盖」，无法删除某一项，只能通过设过期时间伪造删除
封装一个安全可用的 cookie 工具函数
不依赖第三方库时，推荐封装两个基础函数：setCookie() 和 getCookie()，避开正则陷阱和编码问题。
关键点：
• 值必须用 encodeURIComponent() 编码（否则含空格、分号、等号会截断）
• 读取时必须用 decodeURIComponent() 解码（否则中文或特殊字符乱码）
• 匹配 key 要用边界符 (^|;\\s*)key=，避免 user_id 匹配到 user_id_token
立即学习“Java免费学习笔记（深入）”；
function setCookie(name, value, options = {}) {
const { expires, path = '/', domain, secure, sameSite = 'Lax' } = options;
let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires instanceof Date) {
cookieStr += `; expires=${expires.toUTCString()}`;
}
if (path) cookieStr += `; path=${path}`;
if (domain) cookieStr += `; domain=${domain}`;
if (secure) cookieStr += '; secure';
if (sameSite) cookieStr += `; samesite=${sameSite}`;
document.cookie = cookieStr;
}
function getCookie(name) {
const match = document.cookie.match(new RegExp(`(^|;\\s*)${encodeURIComponent(name)}=([^;]*)`));
return match ? decodeURIComponent(match[2]) : null;
}
cookie 不适合复杂状态管理，优先考虑 localStorage + 自定义事件
Cookie 天然不适合存大量或频繁更新的状态：单个 cookie 最大 4KB，总大小通常限制在 8KB；每次 HTTP 请求都会自动携带（浪费带宽）；且无法监听变更。
使用场景判断：
• ✅ 仅用于身份凭证（如 session_id）、用户偏好（语言、主题）等轻量、服务端需校验的字段
• ❌ 不要存购物车列表、表单草稿、UI 展开状态等前端专用数据
-
localStorage容量更大（通常 5–10MB），无网络开销，支持JSON.stringify()存对象 - 用
window.addEventListener('storage', handler)可跨 tab 同步状态（cookie 不行） - 若需服务端参与的状态同步（如登录态），应由后端下发 token，前端只负责透传，不自行生成或修改
现代项目中更推荐用框架内置方案替代手写 cookie
React/Vue/Angular 等框架生态已提供更健壮的状态管理路径，硬套 cookie 容易重复造轮子。
例如：
• Next.js 中用 cookies() server action 获取/设置服务端 cookie（自动处理 HttpOnly 和 Secure）
• Vue 3 的 useCookie 组合式函数（基于 js-cookie 封装，自动编码解码）
• React Query 的 queryClient.setQueryData() 管理服务端状态，本地 UI 状态交给 useState 或 Zustand
手写 cookie 工具只在纯静态页、老系统维护或调试阶段有意义。一旦项目引入构建工具或框架，就该让状态流转回归其设计意图——而不是把 cookie 当成万能存储桶。
