JavaScript操作Cookie：读写删全攻略

本文深入解析了JavaScript中操作Cookie的核心技术，涵盖写入（需拼接键值对及expires、path、secure等属性并编码value）、读取（手动解析document.cookie字符串并解码）和删除（通过覆盖写入同名过期Cookie）的完整流程，同时强调原生操作虽繁琐但对调试与兼容性至关重要，并给出实用建议：如4KB大小限制、敏感信息防护、跨域共享配置，以及在现代开发中优先选用localStorage/sessionStorage、仅将Cookie用于后端必需的身份凭证场景，帮助开发者安全、高效地驾驭这一经典Web机制。

JavaScript 中操作 Cookie 主要通过 document.cookie 实现，它是一个字符串接口，读写都依赖对字符串的解析与拼接。虽然原生方式略显繁琐，但理解其原理对调试和兼容性处理很有帮助。

如何写入 Cookie

写入 Cookie 是给 document.cookie 赋值一个符合格式的字符串。基本语法为：key=value; expires=GMTString; path=/; domain=example.com; secure; HttpOnly（注意：HttpOnly 无法通过 JS 设置）。

• 必须指定 value，且建议对值使用 encodeURIComponent() 编码，避免特殊字符（如空格、分号、逗号）导致截断
• expires 或 max-age 决定有效期；不设置则为会话 Cookie（关闭浏览器即失效）
• path 默认是当前路径，设为 / 可让整个域名下都能访问
• secure 表示仅在 HTTPS 下发送（可选，写入时直接加字段即可）

示例：

document.cookie = "username=john; expires=" + new Date(Date.now() + 24 * 60 * 60 * 1000).toUTCString() + "; path=/; secure";

如何读取 Cookie

document.cookie 返回的是一个以分号加空格（"; "）分隔的字符串，例如："a=1; b=2; c=hello%20world"。需手动解析才能获取指定 key 的 value。

• 先用 split('; ') 拆成键值对数组
• 再遍历，用 indexOf 或正则匹配目标 key（注意边界，避免 user 匹配到 username）
• 对 value 调用 decodeURIComponent() 解码

简易读取函数示例：

function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return undefined;
}

如何删除 Cookie

删除 Cookie 并非调用某个方法，而是通过覆盖写入一个**已过期**的同名 Cookie（相同 domain、path、secure 等属性）。

• 将 expires 设为过去的时间（如 Thu, 01 Jan 1970 00:00:00 GMT）
• 确保 path 和 domain 与写入时一致，否则可能删不掉
• 若原 Cookie 是 secure 的，删除时也需带上 secure

示例：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; secure";

实用建议与注意事项

• Cookie 总大小限制约 4KB，不适合存大量数据；敏感信息不应存 Cookie，尤其未设 HttpOnly 和 Secure
• 跨子域共享需统一设置 domain=.example.com（注意开头的点），且主域不能设为 localhost
• 现代项目推荐优先使用 localStorage 或 sessionStorage 存前端状态，Cookie 仅用于身份凭证等后端必需场景
• 开发中可用浏览器开发者工具 → Application → Cookies 查看和手动编辑，便于验证

本篇关于《JavaScript操作Cookie：读写删全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！