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 不受影响。
立即学习“Java免费学习笔记（深入）”；
- 想删 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，后端根本收不到——不是 JS 没写成功，是发请求时浏览器压根没带上。
