JavaScript如何操作Cookie及常用方法

本文深入解析了JavaScript操作Cookie的核心机制与实用技巧，揭示了document.cookie看似简单实则需手动解析拼接字符串的本质——从如何安全读取（拆分、解码、精准匹配）、正确设置（灵活配置expires/max-age、path、domain、secure等关键选项），到可靠删除（严格匹配路径与域名的过期覆盖），再到开发中必须警惕的安全限制与兼容性陷阱；同时指出原生操作的繁琐缺陷，并推荐js-cookie等成熟方案及localStorage等现代替代策略，帮助开发者避开常见坑点，写出更健壮、安全、可维护的前端Cookie代码。

JavaScript 通过 document.cookie 接口读写 Cookie，它不是对象而是字符串，操作需手动解析和拼接。核心在于理解其格式、作用域限制及安全特性。

读取 Cookie：手动解析字符串

浏览器只提供一个字符串形式的 document.cookie，所有 Cookie 以分号+空格分隔，每项形如 key=value。没有内置方法直接获取指定键，需自行解析：

• 用 document.cookie.split('; ') 拆分为数组
• 遍历每一项，用 .split('=') 分离键值，注意对 value 进行 decodeURIComponent() 解码（因 Cookie 值默认被编码）
• 推荐封装成函数，例如：
  function getCookie(name) { const cookies = document.cookie.split('; '); for (let c of cookies) { const [k, v] = c.split('='); if (k === name) return decodeURIComponent(v); } return null; }

设置 Cookie：拼接字符串并赋值

向 document.cookie 赋值会添加或更新 Cookie，格式为 key=value; options。关键选项包括：

• expires 或 max-age：控制过期时间（expires 是 GMT 时间字符串，max-age 是秒数）
• path：默认为当前路径，设为 / 可使 Cookie 在整个域名下有效
• domain：指定可访问的域名（如 .example.com 允许子域共享）
• secure：仅在 HTTPS 下发送
• HttpOnly：无法通过 JS 访问（服务端设置，JS 无法读写）
• SameSite：防范 CSRF，可选 Strict、Lax 或 None

删除 Cookie：覆盖过期时间

Cookie 无法直接删除，只能通过设置已过期的时间使其失效：

• 将 expires 设为过去的时间（如 Thu, 01 Jan 1970 00:00:00 GMT）
• 必须保证 path 和 domain 与原 Cookie 一致，否则可能删错或失败
• 示例：
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;"

注意事项与替代方案

原生 Cookie 操作繁琐且易出错，实际开发中建议：

• 使用成熟工具库（如 js-cookie），支持链式调用、自动编解码、类型转换
• 敏感信息不要存 Cookie，优先用 HttpOnly + Secure 配合服务端验证
• 单页应用中，考虑用 localStorage 或 sessionStorage 存储非敏感前端状态（但不参与 HTTP 请求）
• 注意同源策略和第三方 Cookie 限制（尤其 Safari 和 iOS 浏览器）

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。