document.cookie不是对象,而是受同源策略和Cookie属性双重限制的字符串接口;写入需手动拼接path、编码等完整属性,读取需解析解码,删除须严格匹配原始作用域参数。

直接说结论: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 依然存在。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记(深入)”;
- 原始写入:
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返回字符串里压根不包含它 -
HttpOnlycookie 在document.cookie中完全不可见,也不能被 JS 删除——它只走 HTTP 请求头往返服务端 - 想安全存 token?别只靠 JS 操作 cookie,得配合服务端签名校验 +
HttpOnly + Secure + SameSite=Strict
真正难的不是“怎么写”,而是“怎么确保每次写、读、删都在同一维度上对齐”:path 是否带尾部斜杠,domain 是否带前导点,中文有没有双重编码,过期时间用的是本地时间还是 GMT。这些细节一旦错位,debug 时看到的永远是“它明明该存在,却读不出来”。


















