document.cookie返回的字符串需过滤属性后提取键值对，核心是按"; "分割、跳过expires等属性名、取首个分号前的value并解码；单条读取推荐正则匹配避免误捕获，注意HttpOnly不可读、路径域名限制及URL编码问题。
直接用 document.cookie 读取时，浏览器返回的是一个以分号加空格（"; "）拼接的字符串，例如："a=1; b=2; c=hello%20world; path=/; HttpOnly"。
但注意：这个字符串里**不仅包含键值对，还混有属性（如 path、domain、Expires 等）**，不能简单按分号切分就完事。
提取所有有效键值对（过滤掉属性）
核心思路是：只保留形如 key=value 且 value 不是标准 Cookie 属性名的片段。常见做法是先按 "; " 分割，再逐段解析：
- 每段用第一个
=拆成 key 和 rest； - key 去除首尾空格；
- 如果 key 是
expires、max-age、domain、path、secure、httponly、samesite等（不区分大小写），跳过； - 否则，把 rest 中第一个分号前的部分作为 value（防 value 本身含分号），再用
decodeURIComponent解码。
示例函数：
function getAllCookies() {
const cookies = {};
document.cookie.split('; ').forEach(pair => {
const [name, ...rest] = pair.split('=');
const key = name.trim();
// 跳过标准属性名（不区分大小写）
if (/^(expires|max-age|domain|path|secure|httponly|samesite)$/i.test(key)) return;
// value 取等号后到下一个分号前（避免误截属性）
const value = rest.join('=').split(';')[0];
try {
cookies[key] = decodeURIComponent(value);
} catch (e) {
cookies[key] = value; // 解码失败时保留原始值
}
});
return cookies;
}
按名称读取某一条 Cookie
更常用的是根据 key 获取单个值。推荐用正则精准匹配，避免子串误命中（比如 key 是 id，别把 userid 当成它）：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
立即学习“Java免费学习笔记（深入）”；
- 正则模式：
(?:^|; )key=(.*?)(?:;|$)； - 用
match()提取捕获组； - 对结果做
decodeURIComponent。
示例：
function getCookie(name) {
const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
return match ? decodeURIComponent(match[1]) : undefined;
}
// 使用
console.log(getCookie('username')); // "admin"
console.log(getCookie('theme')); // "dark"
注意事项和常见陷阱
-
HttpOnly Cookie 无法读取：服务端设置
HttpOnly后，JavaScript 完全访问不到，document.cookie里不会出现该条； -
路径和域名限制：只有当前页面 URL 匹配 Cookie 的
path和domain时，才会出现在document.cookie中； -
编码问题：Cookie 值会自动 URL 编码（空格→
%20，中文→%E4%B8%AD等），必须用decodeURIComponent解码，不能用unescape（已废弃）； -
没有内置的“多值”结构：Cookie 本身不支持数组或对象，所谓“多条”只是多个独立键值对，需自行组织（如用 JSON 字符串存复杂数据，再
JSON.parse）。
不复杂但容易忽略细节。关键是分清“分隔符”只是传输格式，真正要解析的是语义化的键值对，并过滤掉元信息。
