当前位置：首页 > news >正文

浏览器的Cookie 过期时间存储

news 来源：原创 2025/6/10 15:10:17

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=/`;
}