17370845950

JavaScript 无内置 Cookie API，需手动操作 document.cookie 字符串，必须正确编码值、设置 path=/、Secure、expires 等属性，读取需正则解析，删除须完全匹配原 path/domain 并设过期时间。

JavaScript 本身没有内置的 Cookie 类或高级 API，所有操作都依赖原生的 document.cookie 字符串读写，这意味着你得自己解析、编码、设置过期时间、作用域等——稍不注意就会漏掉 path、domain 或 Secure 标志，导致 Cookie 写不进、读不到、或被浏览器拒绝。

如何安全地设置一个带属性的 Cookie

直接拼接字符串极易出错，比如忘记 encodeURIComponent() 导致特殊字符（如空格、分号）截断值，或漏写 path=/ 导致子路径下无法读取。

• 必须对 value 使用 encodeURIComponent()，否则 =、;、空格等会破坏格式
• path=/ 是最常用且推荐的默认值，否则默认为当前路径（比如 /user/profile 下设的 Cookie 在 / 下就读不到）
• 如果站点启用了 HTTPS，务必加上 Secure；若需跨子域共享（如 a.example.com 和 b.example.com），才加 Domain=.example.com
• 有效期用 expires（UTC 时间字符串）比 max-age 兼容性更好（IE 不支持 max-age）

function setCookie(name, value, days = 7) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = date.toUTCString();
  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires}; path=/; Secure; SameSite=Lax`;
}

为什么 document.cookie 读出来是字符串而不是对象

因为 document.cookie 是一个“getter/setter”伪属性：读取时返回一个分号分隔的键值对字符串（如 "a=1; b=2; c=hello%20world"），不自动解析，也不暴露原始属性（expires、HttpOnly 等均不可见）。

• HttpOnly Cookie 完全不可读——JS 访问 document.cookie 时会被静默过滤掉，这是安全机制，不是 bug
• 多个同名 Cookie（不同 path 或 domain）会同时出现在字符串中，但浏览器只返回**当前路径匹配且未过期**的那一条（按写

  

  入顺序？实际由浏览器决定，不可依赖）
• 不能通过 document.cookie = "a=" 删除 Cookie，必须设 expires 为过去时间

如何可靠地读取指定 Cookie 的值

手动解析 document.cookie 字符串是最轻量、无依赖的做法，但要注意边界匹配（避免 name= 匹配到 namename=）和解码。

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

• 正则中 (^|;) 确保匹配键的开头（行首或分号后），\\s* 吃掉可能的空格
• 即使服务端写了 SameSite=None; Secure，JS 仍能读——只要没标 HttpOnly
• 不要用 split(';') + indexOf，遇到值含分号（虽少见但合法）就崩

删除 Cookie 的正确姿势是什么

没有 deleteCookie() 方法。删除 = 覆盖写入一个已过期的同名 Cookie，且 path 和 domain 必须与原 Cookie 完全一致，否则旧 Cookie 仍残留。

• 只设 expires 不够，必须带上和当初设置时一模一样的 path（常见坑：当初没写 path，默认是当前路径，删时却写了 path=/ → 删不掉）
• 如果原 Cookie 有 Domain=.example.com，删除时也必须带上，否则只清除了当前主机名下的副本
• 可以省略 value，但最好设为空字符串，更明确

function deleteCookie(name, path = '/', domain = '') {
  document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}${domain ? '; domain=' + domain : ''}`;
}

真正麻烦的从来不是语法，而是每个属性都得对齐、每个字符都要编码、每次读写都得防注入——这也是为什么现代项目基本用 localStorage 或服务端 session + JWT 替代 Cookie 做前端状态管理。如果非用 Cookie，建议封装成小函数并统一管理 path 和 Secure 策略，别在业务代码里零散拼字符串。