JavaScript操作Cookie：读写与设置过期时间教程

本文深入解析了JavaScript中Cookie的底层机制与实战用法，揭示其并非直观的对象而是需手动拼接的规范字符串，并系统讲解了如何安全地读写Cookie、正确设置过期时间（优先推荐max-age而非易受本地时间影响的expires）、处理中文与特殊字符的编码解码、精准控制作用域（path/domain）以避免常见失效问题，还提供了简洁可靠的工具函数和删除Cookie的关键技巧——强调删除时必须严格匹配原始设置的路径与域名，否则将无法真正清除。

Cookie 是浏览器里的一小段字符串，不是对象也不是 JSON

JavaScript 的 document.cookie 是一个“伪属性”：读它返回一长串用分号分隔的键值对字符串，写它则必须按固定格式拼接字符串——它不提供原生的增删改查方法，也不自动处理 URL 编码或过期逻辑。

常见错误是直接写 document.cookie = "user=john"，结果发现没生效，或者写入后立刻读不到，原因通常是：
– 值里含空格或特殊字符（如 =、;、,）未编码
– 没指定作用域（path），导致只在当前路径下可见
– 没设 expires 或 max-age，变成会话 Cookie（关浏览器就丢）

设置 Cookie 必须手动拼接字符串，且注意分号和空格

写 Cookie 的本质就是给 document.cookie 赋一个符合 Netscape Cookie 规范的字符串。关键参数包括：

• key=value：value 必须用 encodeURIComponent() 编码（尤其中文、空格、符号）
• expires=GMT 时间字符串：格式如 Wed, 21 Oct 2027 07:28:00 GMT，用 new Date().toUTCString() 生成
• max-age=秒数：比 expires 更可靠（不受客户端时间影响），优先级更高
• path=/：建议显式设为 /，否则默认是当前 URL 路径，子路径才能读到
• domain=example.com：跨子域共享时才需要（如 a.example.com 和 b.example.com）
• Secure 和 HttpOnly：JS 无法设置后者；Secure 表示只走 HTTPS 传输

示例：设置一个 7 天后过期、全站可读的用户 ID

const expires = new Date();
expires.setDate(expires.getDate() + 7);
document.cookie = `uid=${encodeURIComponent('abc123')}; expires=${expires.toUTCString()}; path=/; domain=.example.com; Secure`;

读取 Cookie 需要自己解析字符串，不能直接用点号访问

document.cookie 返回的是类似 "a=1; b=2; c=hello%20world" 的字符串，没有内置方法提取某个 key。你得手动切分、解码、匹配：

• 用 document.cookie.split('; ') 切成数组（注意分号后有个空格）
• 对每个项用 .split('=') 拆出 key 和 encoded value
• 用 decodeURIComponent() 解码 value（否则中文/空格显示为 %xx）
• 记得 trim key，因为有些浏览器会在等号前加空格

简单工具函数：

function getCookie(key) {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [k, v] = cookie.split('=');
    if (k.trim() === key) return decodeURIComponent(v);
  }
  return null;
}
// 使用：getCookie('uid')

删除 Cookie 就是设一个已过期的同名 Cookie

没有 deleteCookie() 这种方法。正确做法是用相同的 key、path、domain，再配一个过去的时间：

• 必须确保 path 和 domain 与当初设置时完全一致，否则删不掉
• 用 expires=Thu, 01 Jan 1970 00:00:00 GMT 或 max-age=0 都可以
• value 可以随便填（比如空字符串），但 key 和作用域必须对得上

示例：

document.cookie = `uid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.example.com; Secure`;

真正容易被忽略的是：如果当初没写 path=/，那删除时也得用当时那个 path（比如 path=/admin），否则这个 Cookie 依然存在，只是你看不见。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~