Cookie 是浏览器中的一小段字符串,非对象或JSON;document.cookie 是伪属性,读写需手动拼接符合规范的字符串,须编码值、指定 path/expires/max-age 等参数,并自行解析读取、用过期时间删除。

Cookie 是浏览器里的一小段字符串,不是对象也不是 JSON
JavaScript 的 document.cookie 是一个“伪属性”:读它返回一长串用分号分隔的键值对字符串,写它则必须按固定格式拼接字符串——它不提供原生的增删改查方法,也不自动处理 URL 编码或过期逻辑。
常见错误是直接写 document.cookie = "user=john",结果发现没生效,或者写入后立刻读不到,原因通常是:
– 值里含空格或特殊字符(如 =、;、,)未编码
– 没指定作用域(path),导致只在当前路径下可见
– 没设 expires 或 max-age,变成会话 Cookie(关浏览器就丢)
设置 Cookie 必须手动拼接字符串,且注意分号和空格
写 Cookie 的本质就是给 document.cookie 赋一个符合 Netscape Cookie 规范的字符串。关键参数包括:
-
key=value:value 必须用encodeURIComponent()编码(尤其中文、空格、符号) -
expires=GMT 时间字符串:格式如Wed, 21 Oct 2027 07:28:00 GMT,用new Date().toUTCString()生成 -
max-age=秒数:比expires更可靠(不受客户端时间影响),优先级更高 -
path=/:建议显式设为/,否则默认是当前 URL 路径,子路径才能读到 -
domain=example.com:跨子域共享时才需要(如 a.example.com 和 b.example.com) -
Secure和HttpOnly:JS 无法设置后者;Secure表示只走 HTTPS 传输
示例:设置一个 7 天后过期、全站可读的用户 ID
立即学习“Java免费学习笔记(深入)”;
const expires = new Date();
expires.setDate(expires.getDate() + 7);
document.cookie = `uid=${encodeURIComponent('abc123')}; expires=${expires.toUTCString()}; path=/; domain=.example.com; Secure`;
读取 Cookie 需要自己解析字符串,不能直接用点号访问
document.cookie 返回的是类似 "a=1; b=2; c=hello%20world" 的字符串,没有内置方法提取某个 key。你得手动切分、解码、匹配:
- 用
document.cookie.split('; ')切成数组(注意分号后有个空格) - 对每个项用
.split('=')拆出 key 和 encoded value - 用
decodeURIComponent()解码 value(否则中文/空格显示为 %xx) - 记得 trim key,因为有些浏览器会在等号前加空格
简单工具函数:
function getCookie(key) {
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
const [k, v] = cookie.split('=');
if (k.trim() === key) return decodeURIComponent(v);
}
return null;
}
// 使用:getCookie('uid')
删除 Cookie 就是设一个已过期的同名 Cookie
没有 deleteCookie() 这种方法。正确做法是用相同的 key、path、domain,再配一个过去的时间:
- 必须确保
path和domain与当初设置时完全一致,否则删不掉 - 用
expires=Thu, 01 Jan 1970 00:00:00 GMT或max-age=0都可以 - value 可以随便填(比如空字符串),但 key 和作用域必须对得上
示例:
document.cookie = `uid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.example.com; Secure`;
真正容易被忽略的是:如果当初没写 path=/,那删除时也得用当时那个 path(比如 path=/admin),否则这个 Cookie 依然存在,只是你看不见。











