当前位置：首页 > JavaScript

js 实现保存cookie

2026-04-07 06:58:52JavaScript

设置 Cookie

使用 document.cookie 属性可以直接设置 Cookie。格式为键值对，可以附加过期时间、路径、域名等属性。

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

username=JohnDoe：键值对。
expires：设置过期时间（UTC 格式）。
path=/：指定 Cookie 生效的路径。

设置 Cookie 并添加 Secure 和 HttpOnly 标志

为了安全性，可以添加 Secure（仅 HTTPS 传输）和 HttpOnly（禁止 JavaScript 访问）标志。

js 实现保存cookie

document.cookie = "sessionID=abc123; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/; Secure; HttpOnly";

读取 Cookie

通过 document.cookie 可以获取当前域下的所有 Cookie，返回的是一个字符串，需要自行解析。

const cookies = document.cookie; // "username=JohnDoe; sessionID=abc123"

解析 Cookie

可以将 Cookie 字符串解析为对象，方便读取。

js 实现保存cookie

function getCookies() {
  const cookieStr = document.cookie;
  const cookieArr = cookieStr.split('; ');
  const cookies = {};

  cookieArr.forEach(cookie => {
    const [key, value] = cookie.split('=');
    cookies[key] = value;
  });

  return cookies;
}

const cookies = getCookies();
console.log(cookies.username); // "JohnDoe"

删除 Cookie

通过设置 expires 为过去的时间来删除 Cookie。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

封装 Cookie 操作

可以封装一个工具函数来方便操作 Cookie。

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

  get(name) {
    const cookies = document.cookie.split('; ');
    for (const cookie of cookies) {
      const [key, val] = cookie.split('=');
      if (key === name) return val;
    }
    return null;
  },

  remove(name, path = '/') {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=${path}`;
  }
};

// 使用示例
CookieUtil.set('token', 'xyz123', 30); // 设置 30 天后过期
const token = CookieUtil.get('token'); // 获取 token
CookieUtil.remove('token'); // 删除 token