JavaScript读取和设置Cookie方法详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JavaScript如何读取和设置Cookie》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

JavaScript 中设置 Cookie 需通过 document.cookie = "key=value; expires=...; path=/; domain=..." 字符串赋值，必须显式指定 expires/max-age、path 和 domain 才能正确覆盖或删除；读取需正则解析并 decodeURIComponent；删除本质是写入过期同名 Cookie，且 path/domain 必须严格匹配原值。

JavaScript 中如何用 document.cookie 设置 Cookie

设置 Cookie 的本质是给 document.cookie 赋一个字符串，浏览器会自动解析并存储。但要注意：它不支持直接传入对象或配置项，所有参数必须拼成键值对加属性的形式。

• 基本格式：document.cookie = "key=value; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.example.com; secure; HttpOnly"
• expires 或 max-age 必须显式设置，否则是会话级（关闭浏览器即失效）
• path 默认是当前路径，若想让子路径也能读取，建议设为 path=/
• domain 若带点开头（如 .example.com），表示允许子域名共享；不带点则严格匹配当前 host
• secure 表示仅 HTTPS 下发送；HttpOnly 是服务端设置的，JS 无法通过 document.cookie 设定

JavaScript 中如何安全读取 document.cookie

document.cookie 返回的是一个分号分隔的字符串，比如 "a=1; b=2; c=hello%20world"。它不会返回 expires、path 等元信息，也不能区分同名不同 path/domain 的 Cookie。

• 手动解析需注意 URL 编码：decodeURIComponent() 必须用于 value 部分
• 不能用 split(";") 简单切分——value 里可能含分号（虽少见，但规范允许）
• 推荐按 ; +key= 或正则匹配，避免前缀误判（如 name 和 username）

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

为什么不能直接删 Cookie？expires 设为过去时间才是删除

JavaScript 没有 document.cookie.remove() 这种方法。所谓“删除”，其实是覆盖写入一个已过期的同名 Cookie，让浏览器自动清理。

• 必须保证 path 和 domain 与原 Cookie 完全一致，否则旧 Cookie 仍存在
• 常见错误：只设 expires，但没同步指定 path，导致删不掉
• 安全起见，删除时建议显式带上 path=/（除非你明确知道原 Cookie 的 path）

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

现代项目中更推荐用 cookie-store API（Chrome 114+）

传统 document.cookie 操作繁琐、易出错、无 Promise、不支持 SameSite 等新属性。新版 cookie-store API 提供了结构化读写能力，但目前仅 Chromium 系主流支持。

• 写入：navigator.cookieStore.set({ name: "theme", value: "dark", expires: Date.now() + 86400000 })
• 读取：navigator.cookieStore.get("theme") 返回 Promise
• 监听变更：navigator.cookieStore.addEventListener("change", ...)
• 注意：仍需服务端配合启用 Permissions-Policy: cookie-store=() 才能使用

兼容性差仍是硬伤，生产环境仍需 fallback 到 document.cookie 手动实现。

真正麻烦的不是语法，而是 path/domain/expires 三者必须完全匹配才能覆盖或删除；漏掉任意一个，就等于在写一条新 Cookie。

到这里，我们也就讲完了《JavaScript读取和设置Cookie方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！