JSCookie读写及生命周期管理技巧

本文深入讲解了如何使用原生 JavaScript 高效、安全地读写 Cookie 并精细管理其生命周期——从通过 `getCookie` 解析并获取指定值，到用 `setCookie` 设置带过期时间、路径及 Secure/SameSite 等关键安全属性的 Cookie，再到以“覆写过期时间”方式可靠删除；特别强调了编码处理、路径一致性、HTTPS 传输约束及与服务端协同（如 HttpOnly）等易被忽视却至关重要的实践细节，为身份认证等需前后端共享状态的核心场景提供扎实可靠的客户端存储方案。

在前端开发中，使用 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 不复杂，但要注意编码、路径和安全属性，避免遗漏关键细节。

今天关于《JSCookie读写及生命周期管理技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于js完整使用教程的内容请关注golang学习网公众号！