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 后端 API 故障时使用此技能,尤其适用于以下任务:分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转,以及生成简洁的诊断结论与修复方案。
- 正则模式:
(?:^|; )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)。
不复杂但容易忽略细节。关键是分清“分隔符”只是传输格式,真正要解析的是语义化的键值对,并过滤掉元信息。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










