JavaScript 中 DOM 查询怎么通过 document.cookie 读取与解析页面 Cookie 数据-js教程-PHP中文网

document.cookie 是读写 http cookie 的接口，返回 url 编码的键值对字符串，不包含 path、domain 等属性，httponly cookie 不可读；需手动解析为对象，写入需指定 path/domain 以确保删除有效；敏感数据应由服务端管理。

javascript 中 dom 查询怎么通过 document.cookie 读取与解析页面 cookie 数据

不能通过 document.cookie 直接“查询 DOM”——这是常见误解。document.cookie 是用于读写浏览器 Cookie 的接口，和 DOM 查询（如 document.getElementById、querySelector）完全无关。它不操作页面元素，只处理 HTTP Cookie 字符串。

document.cookie 读取的是字符串，不是对象

document.cookie 是一个特殊的 accessor 属性：读取时返回当前域名下**所有可访问 Cookie 的键值对字符串**，格式为：

key1=value1; key2=value2; key3=value3

注意：
- 不包含 Path、Domain、HttpOnly、Secure 等属性（这些仅服务端可见或受浏览器保护）；
- 若 Cookie 被标记为 HttpOnly，JavaScript **完全无法读取**，document.cookie 中不会出现该条目；
- 所有值都是 URL 编码的（如空格变 %20），需用 decodeURIComponent() 解码。

手动解析 cookie 字符串为对象

原生不提供解析方法，需自行拆分。推荐轻量健壮的解析逻辑：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

用 document.cookie.split('; ') 拆成键值对数组（注意分号后带空格）
对每项用 split('=', 2) 分离 key 和 value（防止 value 含等号）
用 decodeURIComponent() 解码 key 和 value
过滤空 key，避免脏数据

示例函数：

function parseCookies() {
  const cookies = {};
  document.cookie.split('; ').forEach(pair => {
    const [key, value] = pair.split('=', 2);
    if (key) {
      cookies[decodeURIComponent(key)] = decodeURIComponent(value || '');
    }
  });
  return cookies;
}
// 使用
const cookies = parseCookies();
console.log(cookies.theme); // 如 'dark'