Cookie管理：读取、删除与安全设置全解析

document.cookie 并非直观易用的对象，而是一个受同源策略与多重安全属性严格约束的字符串接口——写入需手动拼接 path、编码、过期时间等完整参数，读取要自行解析解码，删除则必须精确复刻原始作用域（path/domain/Secure等四元组），稍有偏差就会导致“写不进、读不到、删不净”；中文需强制 encodeURIComponent/decodeURIComponent，React/Vue 路由跳转不刷新时 path 匹配易失效，HttpOnly/SameSite/Max-Age 等关键安全属性 JS 完全不可见不可控，真正挑战在于每一次操作都必须在路径格式、域名规范、编码层级、时间标准等维度上严丝合缝地对齐，否则调试时你面对的永远是那个“本该存在却消失无踪”的 cookie。

直接说结论：document.cookie 不是对象，不能当变量赋值或读属性；它是一把双刃剑——写入简单，但路径、编码、过期逻辑稍错一点就失效或删不干净。

document.cookie 写入必须带 path=/ 才能全站访问

默认不写 path 时，浏览器自动设为当前页面路径（比如 /dashboard/user），结果在 /settings 页面里 document.cookie 就读不到这个 cookie。这不是“没写成功”，而是“写对了位置，但你不在那个位置”。

• 全站可用写法：document.cookie = "theme=dark; path=/";
• 仅限子路径（如 /api）：document.cookie = "token=abc; path=/api/";（注意末尾斜杠，/api 和 /api/ 是不同路径）
• 如果用 React/Vue 路由跳转但没刷新页面，path 不匹配会导致“刚设完就读不到”——因为 JS 还在原路径上下文里

中文值必须用 encodeURIComponent() 编码，且读取后必须 decodeURIComponent()

document.cookie = "name=张三" 看似正常，实际会变成乱码或截断，因为 cookie 值只允许 URL-safe 字符。浏览器不会自动帮你编码，也不会在读取时自动解码。

• 正确写入：document.cookie = "name=" + encodeURIComponent("张三") + "; path=/";
• 正确读取：const value = decodeURIComponent(document.cookie.split("; ").find(row => row.startsWith("name="))?.split("=")[1] || "");
• 别用 escape() —— 它已被废弃，对 Unicode 处理错误，encodeURIComponent() 才是标准
• 同一个 key 多次写入（如连续调两次 document.cookie = "a=1"; document.cookie = "a=2";），最终生效的是后者，但 find() 只取第一个匹配项，容易误读

删除 Cookie 必须复刻原始 path/domain，否则删不干净

删不掉不是 bug，是匹配失败。浏览器按 key + path + domain + secure 四元组识别 cookie，缺一不可。你在 /admin 页面写了 path=/admin/，却在根目录用 path=/ 去删，原 cookie 依然存在。

• 原始写入：document.cookie = "session=xyz; path=/admin/; domain=.example.com; Secure";
• 对应删除：document.cookie = "session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/admin/; domain=.example.com; Secure";
• domain 写成 example.com 而不是 .example.com？不匹配，删不掉
• 本地开发用 http://localhost 却加了 Secure？该 cookie 根本不会被写入（Application > Cookies 面板里为空）

HttpOnly、SameSite=None、Max-Age 这些属性 JS 根本碰不到

document.cookie 只能看到非 HttpOnly 的 cookie，且无法设置 HttpOnly 或 SameSite 属性——这些只能由服务端通过 Set-Cookie 响应头下发。

• SameSite=None 必须搭配 Secure，否则 Chrome 会静默拒绝（2026 年仍严格执行）
• Max-Age=3600 比 expires 更推荐，单位是秒，不受客户端时间影响；但 JS 里无法读取它的值，document.cookie 返回字符串里压根不包含它
• HttpOnly cookie 在 document.cookie 中完全不可见，也不能被 JS 删除——它只走 HTTP 请求头往返服务端
• 想安全存 token？别只靠 JS 操作 cookie，得配合服务端签名校验 + HttpOnly + Secure + SameSite=Strict

真正难的不是“怎么写”，而是“怎么确保每次写、读、删都在同一维度上对齐”：path 是否带尾部斜杠，domain 是否带前导点，中文有没有双重编码，过期时间用的是本地时间还是 GMT。这些细节一旦错位，debug 时看到的永远是“它明明该存在，却读不出来”。

本篇关于《Cookie管理：读取、删除与安全设置全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！