JS Cookie怎么读写_JS Cookie读写操作与生命周期管理方法

答案：通过原生JS可操作Cookie实现客户端存储。使用getCookie读取指定名称的Cookie值，setCookie设置带过期时间的Cookie，deleteCookie通过设置过去时间删除Cookie，需注意路径、编码及Secure、SameSite等安全属性，适用于身份认证等需与服务器共享状态的场景。

在前端开发中，使用 JavaScript 操作 Cookie 是一种常见的客户端数据存储方式。虽然现在有 localStorage 和 sessionStorage 等更现代的替代方案，但在需要与服务器共享状态（如身份认证）时，Cookie 依然不可替代。下面介绍如何用原生 JS 读写 Cookie，并管理其生命周期。

读取 Cookie

JavaScript 中没有内置的专门方法来读取指定的 Cookie，但可以通过 document.cookie 获取所有 Cookie 字符串，然后自行解析。

document.cookie 返回的是一个字符串，包含当前页面可用的所有 Cookie，格式为 "key1=value1; key2=value2"。

示例：读取指定名称的 Cookie

以下函数可用于根据名称获取 Cookie 值：

function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

使用方式：
const userId = getCookie('userId');
如果不存在该 Cookie，返回 null。

写入 Cookie

通过赋值 document.cookie 可以添加或更新 Cookie。注意：每次赋值只能设置一个 Cookie。

示例：设置带过期时间的 Cookie

以下函数可设置 Cookie 并指定有效期（单位：天）：

function setCookie(name, value, days) {
  const expires = new Date();
  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;
}

说明：
- encodeURIComponent 防止特殊字符出错。
- expires 设置过期时间，不设置则为会话 Cookie（关闭浏览器即失效）。
- path=/ 表示整个站点都可访问该 Cookie，也可设为特定路径如 path=/admin。

高级选项：设置安全属性

若网站使用 HTTPS，建议加上 Secure 和 SameSite 属性：

document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;Secure;SameSite=Strict`;

Secure：仅通过 HTTPS 传输。
SameSite=Strict：防止跨站请求伪造（CSRF）。

删除 Cookie

JavaScript 无法直接“删除” Cookie，但可以通过设置过期时间为过去的时间来让浏览器自动清除。

function deleteCookie(name) {
  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
}

注意：path 必须与设置时一致，否则可能无法正确删除。

Cookie 生命周期管理

Cookie 的生命周期由 Expires 或 Max-Age 决定：

• 不设置过期时间 → 会话 Cookie，浏览器关闭后失效。
• 设置 expires 或 max-age → 持久化 Cookie，到时间后自动清除。
• 可通过服务端响应头 Set-Cookie 更精确控制，如 HttpOnly、Secure 等。

常见场景建议：
- 用户登录状态：设置 7 天或 30 天过期，加 Secure 和 HttpOnly（由后端设置）。
- 临时标记（如弹窗已展示）：使用会话 Cookie 即可。

基本上就这些。JS 操作 Cookie 不复杂，但要注意编码、路径和安全属性，避免遗漏关键细节。