17370845950

JavaScript 操作 Cookie 需手动拼接字符串设置、正则解析读取，无法直接键值对操作；赋值为追加而非覆盖，删除需设过期时间；推荐用 js-cookie 库或服务端 Set-Cookie 控制。

JavaScript 里操作 Cookie 不需要额外库，但原生 API 极其简陋——document.cookie 是个字符串拼接接口，不是对象，不能直接读写键值对。

怎么设置 Cookie：必须手动拼接字符串

设置 Cookie 的本质是给 document.cookie 赋一个格式严格的字符串。浏览器只认这个，不校验语法，错了一点就静默失败。

• 基本格式：key=value; expires=Wed, 01 Jan 2025 00:00:00 GMT; path=/; domain=.example.com; secure; HttpOnly
• expires 或 max-age 必须显式指定，否则是会话级（关闭浏览器即删）
• domain 若带前导点（如 .example.com），表示子域名共享；不带则仅当前主机名生效
• secure 表示只在 HTTPS 下发送；HttpOnly 无法被 JS 读取（所以 JS 永远拿不到它）

document.cookie = "token=abc123; max-age=3600; path=/; domain=.myapp.com; secure";

怎么读取 Cookie：得自己解析字符串

document.cookie 返回的是一个分号+空格分隔的字符串，比如 "a=1; b=2; c=3"，没有内置方法拆解。

• 不能用 JSON.parse()，也不能直接 split(';') 就完事——值里可能含分号或空格
• 推荐用正则提取键值对，注意 URL 编码（encodeURIComponent 写入时，decodeURIComponent 读取时）
• 如果 Cookie 值含等号（如 user=name=jack），正则要匹配第一个等号之后的所有内容

function getCookie(name) {
  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
  return match ? decodeURIComponent(match[2]) : null;
}
console.log(getCookie("token")); // "abc123"

为什么不能用 document.cookie = "a=1" 直接覆盖全部？

赋值操作不是“替换”，而是“追加”。每次写 document.cookie 都是在现有 Cookie 列表末尾添加一条新记录（或更新同名项）。已存在的其他 Cookie 不受影响。

• 想删 Cookie？只能设 expires 为过去时间，例如 expires=Thu, 01 Jan 1970 00:00:00 GMT
• 路径（path）和域名（domain）必须完全一致才能覆盖或删除，否则就是新增一条独立 Cookie
• 不同 path 下的同名 Cookie 可以共存（比如 path=/ 和 path=/admin）

实际项目中更建议用什么？

手写解析容易出错，尤其涉及编码、路径、过期逻辑时。现代项目通常：

• 用 js-cookie 这类轻量库：Cookie.set("token", "abc", { expires: 1, path: "/" })
• 服务端下发 Set-Cookie 头控制更可靠（尤其 HttpOnly + Secure）
• 敏感信息（如 session token）绝不存到可被 JS 读取的 Cookie 里——优先考虑 HttpOnly + SameSite=Strict

最常被忽略的一点：前端写的 Cookie，如果没配对的 domain 和 path，后端根本收不到——