17370845950

JavaScript操作Cookie易踩坑，关键在path、domain、Secure和SameSite配置：写入未显式指定path会导致读取不匹配；跨子域需设domain=.example.com；HttpOnly Cookie不可通过document.cookie访问；删除需用过期时间且path/domain必须与写入一致。

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 就看不到它。

• 始终显式声明 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 四个字段。