17370845950

直接读写 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

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 当成万能存储桶。