BOM 本身不提供 cookie 操作接口，需通过 document.cookie（属 DOM）实现；读取需手动解析并解码，写入需拼接含属性的字符串，删除须用相同 path/domain 覆盖过期。
JavaScript 中 BOM（Browser Object Model）本身不直接提供 cookie 操作接口，但通过 document.cookie（属于 DOM，但常与 BOM 协同使用）可以实现客户端状态保持。这是最轻量、兼容性最好的基础方案，无需服务端参与，适合保存用户偏好、主题、登录态标记等小量非敏感数据。
读取 cookie：解析 document.cookie 字符串
document.cookie 是一个只读字符串，格式为 key1=value1; key2=value2; key3=value3，多个键值对用分号加空格分隔。它不自动解码，也不支持直接按名取值，需手动解析：
- 用
split('; ')拆分成键值对数组 - 对每项用
split('=', 2)分离 key 和 value - 用
decodeURIComponent()解码 value（因为 cookie 值默认被 URI 编码） - 注意：cookie 名区分大小写，且可能含路径/域等属性，解析时应跳过不含
=的项（如path=/）
示例函数：
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (let str of cookies) {
const [key, ...rest] = str.split('=');
if (key === name) {
return decodeURIComponent(rest.join('='));
}
}
return null;
}
写入 cookie：拼接字符串并赋值给 document.cookie
设置 cookie 实际是向 document.cookie 写入一条格式化字符串。必须包含 name=value，可选添加 expires、max-age、path、domain、secure、SameSite 等属性：
立即学习“Java免费学习笔记（深入）”；
-
expires接 Date.toUTCString() 格式时间（如Thu, 01 Jan 1970 00:00:00 GMT），设为过去时间可删除 cookie -
max-age更推荐，单位秒（如max-age=3600表示 1 小时后过期） -
path=/确保整个站点可读（默认是当前路径，常导致子路径读不到） -
SameSite=Lax或Strict防止 CSRF，现代应用建议显式设置 - 敏感数据避免存 cookie；value 必须用
encodeURIComponent()编码
示例函数：
function setCookie(name, value, options = {}) {
let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (options.expires) cookieStr += `; expires=${options.expires.toUTCString()}`;
if (options['max-age']) cookieStr += `; max-age=${options['max-age']}`;
if (options.path) cookieStr += `; path=${options.path}`;
if (options.domain) cookieStr += `; domain=${options.domain}`;
if (options.secure) cookieStr += '; secure';
if (options.samesite) cookieStr += `; SameSite=${options.samesite}`;
document.cookie = cookieStr;
}
删除 cookie：覆盖过期时间
cookie 无法直接“删除”，只能通过设置已过期的 expires 或极小的 max-age 覆盖原值。关键点：
- 必须使用与写入时完全相同的
path和domain，否则浏览器视为不同 cookie，旧值仍存在 - 推荐统一用
path=/，避免路径不匹配问题 - 安全起见，删除时也带上
secure和SameSite属性（若原 cookie 含这些）
示例：
function deleteCookie(name) {
document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}
注意事项与局限性
cookie 方案简单，但有明显约束：
- 单个 cookie 最大 4KB，总数量和大小受浏览器限制（通常 180 个左右）
- 每次 HTTP 请求都会自动携带 cookie，增加请求头体积，影响性能
- 不支持复杂数据类型（如对象、数组），需自行序列化（
JSON.stringify）和反序列化 - HTTP-only cookie 无法被 JS 读写，仅服务端可用；若需 JS 访问，设置时不能加
HttpOnly - 现代开发中，
localStorage更适合纯前端状态保持；cookie 主要用于需要和服务端共享的状态（如 session ID）
不复杂但容易忽略细节。
