javascript Cookie是什么_如何设置和获取

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}`; } 
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 引入后，所有操作变成语义化调用：

它还支持自定义编码器、作用域继承、类型安全提示——这些细节原生 API 全要你自己兜底。真正容易被忽略的是：Cookie 的 HttpOnly 属性一旦开启，JS 就永远读不到该 cookie（这是安全设计，不是 bug），所以别指望用 JS 操作服务端设的 HttpOnly cookie。