如何通过JavaScript高效操作网站Cookie数据？

本文共计672个文字，预计阅读时间需要3分钟。

JavaScript操作Cookie并不难，但容易踩坑——尤其是路径、域名、HttpOnly和SameSite这几项配置没对，直接使用`document.cookie`就会出问题——不是写不进、读不到，就是被浏览器拦截。

为什么 document.cookie 赋值后读不出来？

最常见原因是写入时没指定 path 或 domain，导致读取时默认路径不匹配。比如在 /admin/user 页面写入：

document.cookie = "token=abc123";

这实际等价于：

document.cookie = "token=abc123; path=/admin/user";

之后在 / 或 /dashboard 下调用 document.cookie 就看不到它。

立即学习“Java免费学习笔记（深入）”；

• 始终显式声明 path=/（除非你真需要路径隔离）
• 如果跨子域共享（如 user.example.com ↔ api.example.com），必须加 domain=.example.com
• Secure 标志只在 HTTPS 下生效，HTTP 环境下设了也无效

如何安全读取和解析 Cookie 字符串？

document.cookie 返回的是一个分号分隔的字符串，不是对象，也没有内置解析方法。直接 .split(';') 容易因空格、编码字符出错。

推荐用这个轻量函数提取指定 key：

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

• 正则里 (^| ) 防止匹配到类似 auth_token 的子串
• 必须用 decodeURIComponent，否则中文或特殊字符会乱码
• 注意：HttpOnly Cookie 完全不可见，document.cookie 里永远不出现

删除 Cookie 的正确姿势是什么？

没有“删除”操作，只有“覆盖过期”。必须保证 path 和 domain 与写入时完全一致，否则旧 Cookie 仍残留。

document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.example.com";

• expires 设为过去时间即可，不用管时区——浏览器按本地时间解析
• 如果原 Cookie 是 path=/admin，这里也得写 path=/admin，否则删不掉
• SameSite 属性不影响删除，但若原 Cookie 带 SameSite=Strict，某些浏览器可能限制其写入权限

真正麻烦的从来不是语法，而是 Cookie 的生命周期和作用域规则——写进去容易，让它在该出现的地方出现、在该消失的时候消失，才需要反复核对 path/domain/Secure/SameSite 四个字段。