如何操作Cookie_JavaScript中如何读取和设置Cookie_网络技术

如何操作Cookie_JavaScript中如何读取和设置Cookie

发布时间 - 2026-01-06 00:00:00 点击率：次

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 # java # js # cookie # 编码 # 浏览器 # ai # 键值对 # 为什么

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：HTML5如何减少Cookie体积_HTML5存储替代方案【

下一篇：Composer是怎么安装的？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：HTML5如何减少Cookie体积_HTML5存储替代方案【

下一篇：Composer是怎么安装的？