JavaScript 中怎么使用 document.cookie 设置与读取浏览器 Cookie-js教程-PHP中文网

document.cookie 操作 cookie 本质是字符串读写，非对象操作；设置需带属性（如 expires/path/secure），读取需手动解析分号分隔字符串，删除需用过期时间并匹配原 path/domain。

javascript 中怎么使用 document.cookie 设置与读取浏览器 cookie

JavaScript 中用 document.cookie 操作 Cookie，本质是“写字符串”和“解析字符串”，不是对象操作。它不提供直接的增删查改方法，但行为明确、兼容性极好，至今仍是前端基础能力之一。

设置 Cookie：赋值即创建或更新

每次对 document.cookie 赋值，只影响当前指定的键值对，不会清空其他 Cookie。关键要带属性，否则是会话级（关闭浏览器即失效）：

基础写法：document.cookie = "theme=dark"; —— 仅当前页面有效，关浏览器就丢
加过期时间：document.cookie = "user=john; expires=Sat, 12 Sep 2026 10:00:00 GMT"; —— 时间必须是 UTC/GMT 格式
设作用路径：document.cookie = "token=abc123; path=/api;"; —— 只有 /api 及其子路径能读到
强制 HTTPS：document.cookie = "secure_flag=true; Secure"; —— 仅在 HTTPS 下发送
编码特殊字符：document.cookie = "url=" + encodeURIComponent("https://a.com?x=1&y=2"); —— 避免分号、等号、空格导致解析失败

读取 Cookie：手动拆解分号分隔字符串

document.cookie 返回的是类似 "a=1; b=2; c=hello%20world" 的字符串，不含属性（如 expires/path），且 HttpOnly 的 Cookie 完全不可见：

Gradle 9.8.0

下载

先解码：const decoded = decodeURIComponent(document.cookie);
再按"; "拆成数组：const pairs = decoded.split("; ");
遍历匹配键名：pairs.find(pair => pair.startsWith("theme="))?.split("=")[1] || null;

推荐封装函数，处理空格和边界情况：

function getCookie(name) {<br>  const cookies = decodeURIComponent(document.cookie).split("; ");<br>  for (const cookie of cookies) {<br>    if (cookie.startsWith(name + "=")) {<br>      return cookie.substring(name.length + 1);<br>    }<br>  }<br>  return null;<br>}

删除 Cookie：把过期时间设为过去

没有“删除”指令，只需让浏览器认为它已过期。注意：path 和 domain 必须与设置时一致，否则可能删不掉：

最简方式：document.cookie = "theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
若当初设置了 path=/admin，删除时也要带上：document.cookie = "theme=; expires=...; path=/admin";
若设置了 domain=.example.com，删除时也需补上：document.cookie = "theme=; expires=...; domain=.example.com; path=/";