Cookie 是服务器发送到浏览器的小型文本数据，用于跟踪用户状态（如登录信息、偏好设置），存储大小通常限制为 4KB，每个域名下最多允许约 20-50 个 Cookie（不同浏览器不同）。

属性

属性	说明	示例	注意事项
名称和值	Cookie 的键值对，用于存储数据	username=John	名称和值需进行 URL 编码（如空格转为%20）
Domain	指定 Cookie 生效的域名，默认仅当前域名（不含子域名）	.example.com（允许所有子域名）	若显式设置域名，则包含子域名；不设置则仅当前域名
Path	指定 Cookie 生效的路径，默认当前路径	/admin（仅/admin路径下可访问）	设为/表示全站生效
Expires	绝对过期时间（GMT 日期）	expires=Mon, 01 Jan 2024 00:00:00 GMT	优先级低于Max-Age；未设置则为会话 Cookie（关闭浏览器失效）
Max-Age	相对过期时间（秒数）	max-age=3600（1 小时后过期）	优先级高于Expires；设为0表示立即删除
Secure	仅通过 HTTPS 传输 Cookie	Secure	本地开发（HTTP）需关闭此属性，否则 Cookie 不生效
HttpOnly	禁止 JavaScript 访问 Cookie，防止 XSS 攻击	HttpOnly	无法通过document.cookie读取，但浏览器仍会自动发送到服务器
SameSite	控制跨站请求时是否发送 Cookie： - Strict：禁止跨站 - Lax：允许安全跨站导航（如链接跳转） - None：允许所有跨站	SameSite=Lax

设置 Cookie

// 设置一个名为"user"的Cookie，有效期7天
document.cookie = "user=Alice; expires=" + new Date(Date.now() + 7*24*60*60*1000).toUTCString() + "; path=/";

读取 Cookie

// 获取所有Cookie并解析为对象
const cookies = document.cookie.split(';').reduce((res, c) => {const [key, val] = c.trim().split('=');res[key] = val;return res;
}, {});
console.log(cookies.user); // 输出: Alice

删除 Cookie

// 设置过期时间为过去的时间
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Cookie 过期时间

固定天数过期

// 默认 7 天后过期（浏览器关闭不影响计时）
const saveToCookie = (key, value, daysToExpire = 7) => {const date = new Date();date.setTime(date.getTime() + daysToExpire * 24 * 60 * 60 * 1000);document.cookie = `${key}=${value}; expires=${date.toUTCString()}; path=/`;
}

会话期 Cookie（关闭浏览器即失效）

// 删除 expires 属性即可
const saveSessionCookie = (key, value) => {document.cookie = `${key}=${value}; path=/`; // 不设置 expires
}

 立即过期（用于删除）

// 设置过期时间为过去时间
const deleteCookie = (key) => {document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}

总结

类型	expires 属性	浏览器行为
固定时间 Cookie	设置具体过期时间（如 7 天后）	即使关闭浏览器，Cookie 仍会保留至过期时间
会话期 Cookie	不设置 expires 属性	浏览器关闭后自动删除
立即过期	设置为过去时间	立即删除 Cookie

推荐改用 max-age（更直观的秒数控制）

// 使用 max-age 替代 expires（单位：秒）
const saveToCookie = (key, value, maxAge = 604800) => { // 默认 7 天document.cookie = `${key}=${value}; max-age=${maxAge}; path=/`;
}// 会话期 Cookie（浏览器关闭失效）
const saveSessionCookie = (key, value) => {document.cookie = `${key}=${value}; path=/`;
}// 立即失效
const deleteCookie = (key) => {document.cookie = `${key}=; max-age=0; path=/`;
}