document.cookie 操作 Cookie 本质是字符串读写，非对象操作；设置需带属性（如 expires/path/Secure），读取需手动解析分号分隔字符串，删除需用过期时间并匹配原 path/domain。
JavaScript 中用 document.cookie 操作 Cookie，本质是“写字符串”和“解析字符串”，不是对象操作。它不提供直接的增删查改方法，但行为明确、兼容性极好，至今仍是前端基础能力之一。
设置 Cookie：赋值即创建或更新
每次对 document.cookie 赋值，只影响当前指定的键值对，不会清空其他 Cookie。关键要带属性，否则是会话级（关闭浏览器即失效）：
- 基础写法：
document.cookie = "theme=dark";—— 仅当前页面有效，关浏览器就丢 - 加过期时间：
document.cookie = "user=john; expires=Sat, 12 Sep 2026 10:00:00 GMT";—— 时间必须是 UTC/GMT 格式 - 设作用路径：
document.cookie = "token=abc123; path=/api;";—— 只有/api及其子路径能读到 - 强制 HTTPS：
document.cookie = "secure_flag=true; Secure";—— 仅在 HTTPS 下发送 - 编码特殊字符：
document.cookie = "url=" + encodeURIComponent("https://a.com?x=1&y=2");—— 避免分号、等号、空格导致解析失败
读取 Cookie：手动拆解分号分隔字符串
document.cookie 返回的是类似 "a=1; b=2; c=hello%20world" 的字符串，不含属性（如 expires/path），且 HttpOnly 的 Cookie 完全不可见：
- 先解码：
const decoded = decodeURIComponent(document.cookie); - 再按
"; "拆成数组：const pairs = decoded.split("; "); - 遍历匹配键名：
pairs.find(pair => pair.startsWith("theme="))?.split("=")[1] || null; - 推荐封装函数，处理空格和边界情况：
function getCookie(name) {<br> const cookies = decodeURIComponent(document.cookie).split("; ");<br> for (const cookie of cookies) {<br> if (cookie.startsWith(name + "=")) {<br> return cookie.substring(name.length + 1);<br> }<br> }<br> return null;<br>}
删除 Cookie：把过期时间设为过去
没有“删除”指令，只需让浏览器认为它已过期。注意：path 和 domain 必须与设置时一致，否则可能删不掉：
立即学习“Java免费学习笔记（深入）”；
- 最简方式：
document.cookie = "theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; - 若当初设置了
path=/admin，删除时也要带上：document.cookie = "theme=; expires=...; path=/admin"; - 若设置了
domain=.example.com，删除时也需补上：document.cookie = "theme=; expires=...; domain=.example.com; path=/";
常见陷阱提醒
很多问题其实卡在细节：
- 中文或符号没编码 → 写入失败或读取乱码
- 读不到 Cookie → 检查是否被
HttpOnly保护，或路径/域名不匹配 - 删不掉 Cookie → 删除时的
path或domain与设置时不一致 - 多个同名 Cookie → 浏览器按路径/域名优先级返回一个，不是覆盖而是并存
- 大小限制：单个 Cookie 不超过 4KB，整域建议不超过 50 个
