当前位置：首页 > JavaScript

js实现cookie

2026-04-04 04:58:15JavaScript

设置Cookie

使用document.cookie属性设置Cookie。格式为name=value，可附加可选参数如过期时间、路径、域名等。

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

参数说明：

js实现cookie

expires：设置过期时间（UTC格式）。
path：指定Cookie生效的路径，默认为当前路径。
domain：指定域名，默认为当前域名。
secure：仅通过HTTPS传输。
SameSite：限制跨站请求（Strict/Lax/None）。

读取Cookie

通过document.cookie获取所有Cookie（字符串形式），需手动解析：

js实现cookie

function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    const [cookieName, cookieValue] = cookie.trim().split('=');
    if (cookieName === name) return decodeURIComponent(cookieValue);
  }
  return null;
}
console.log(getCookie("username")); // 输出 "John Doe"

删除Cookie

通过设置过期时间为过去的时间来删除Cookie：

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

封装工具函数

以下是一个完整的Cookie操作工具示例：

const CookieUtil = {
  set(name, value, options = {}) {
    let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (options.expires instanceof Date) {
      cookie += `; expires=${options.expires.toUTCString()}`;
    }
    if (options.path) cookie += `; path=${options.path}`;
    if (options.domain) cookie += `; domain=${options.domain}`;
    if (options.secure) cookie += `; secure`;
    if (options.sameSite) cookie += `; SameSite=${options.sameSite}`;
    document.cookie = cookie;
  },

  get(name) {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      const [cookieName, cookieValue] = cookie.trim().split('=');
      if (cookieName === encodeURIComponent(name)) {
        return decodeURIComponent(cookieValue);
      }
    }
    return null;
  },

  remove(name, path = '/') {
    this.set(name, '', { expires: new Date(0), path });
  }
};

// 使用示例
CookieUtil.set("theme", "dark", { expires: new Date(2025, 11, 31) });
console.log(CookieUtil.get("theme")); // "dark"
CookieUtil.remove("theme");