JavaScript Cookie 是浏览器内置的客户端存储机制，本质是服务器通过 Set-Cookie 响应头下发、由浏览器自动回传的名/值对文本，最大约4KB、同域名最多50个；document.cookie 是字符串而非对象，仅支持赋值写入和字符串读取，需手动编码（encodeURIComponent）、解码（decodeURIComponent），重复设置同名Cookie必须path/domain等属性完全一致才覆盖，删除须设过去时间的expires且path匹配，HttpOnly Cookie无法被JS读取。
JavaScript Cookie 是浏览器内置的一种客户端存储机制，本质是服务器通过 Set-Cookie 响应头下发、由浏览器自动在后续请求中回传的一段小文本（名/值对），最大约 4KB，同一域名下通常最多存 50 个。
document.cookie 是字符串，不是对象
这是绝大多数初学者踩坑的起点：你不能像操作 localStorage 那样直接读写 document.cookie 的属性。它只支持「赋值写入」和「字符串读取」两种原始操作：
-
document.cookie = "theme=dark; expires=Fri, 01 Jan 2030 00:00:00 GMT; path=/"—— 设置成功，但不会报错，也不会覆盖其他 cookie -
console.log(document.cookie)返回类似"theme=dark; user_id=abc123; token=xyz"的分号分隔字符串，需手动解析 - 重复设置同名 cookie 时，**必须保证 path、domain、secure 等属性完全一致**，否则会创建新条目而非覆盖
设置 Cookie 必须编码，读取必须解码
中文、空格、等号、分号等特殊字符不编码会导致截断或解析失败。原生 API 不自动处理，必须手动：encodeURIComponent() 写入，decodeURIComponent() 读取。
function setCookie(name, value, days = 7, path = '/') {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = `expires=${date.toUTCString()}`;
document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=${path}`;
}
<p>function getCookie(name) {
const cookies = document.cookie.split('; ');
for (let cookie of cookies) {
const [n, v] = cookie.split('=');
if (n === name) return decodeURIComponent(v);
}
return null;
}删除 Cookie 的关键不是清空值，而是过期时间
写 document.cookie = "name=;" 是无效的——浏览器仍会把它当作一个会话级 cookie 存在。真正删除的唯一可靠方式是把 expires 设为过去时间（UTC 格式）：
立即学习“Java免费学习笔记（深入）”；
- ✅ 正确：
document.cookie = "theme=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/" - ❌ 错误：
document.cookie = "theme="或document.cookie = "theme=; max-age=0"（部分旧浏览器不支持max-age） - ⚠️ 注意：删除时的
path必须与设置时完全一致，否则删不掉（比如设置时用了path=/admin，删除时却用path=/就失败）
用 js-cookie 库省去所有底层细节
除非你在写兼容 IE8 的老项目，否则别手写 cookie 工具函数。npm 安装或 CDN 引入后，所有操作变成语义化调用：
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3/dist/js.cookie.min.js"></script>
<script>
Cookies.set('user_token', 'abc123', { expires: 30, secure: true, sameSite: 'Lax' });
const token = Cookies.get('user_token'); // 自动解码
Cookies.remove('user_token', { path: '/' }); // 自动匹配并过期
</script>它还支持自定义编码器、作用域继承、类型安全提示——这些细节原生 API 全要你自己兜底。真正容易被忽略的是：Cookie 的 HttpOnly 属性一旦开启，JS 就永远读不到该 cookie（这是安全设计，不是 bug），所以别指望用 JS 操作服务端设的 HttpOnly cookie。
