当前位置：首页 > JavaScript

js实现cookies

2026-02-01 13:14:53JavaScript

设置Cookie

使用document.cookie属性设置Cookie，格式为键值对，可附加选项（如过期时间、路径等）。

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

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

读取Cookie

通过document.cookie获取所有Cookie（返回字符串，需手动解析）。

js实现cookies

const cookies = document.cookie; // 示例输出: "username=JohnDoe; theme=dark"

解析示例：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
console.log(getCookie("username")); // 输出: JohnDoe

更新Cookie

直接重新设置同名Cookie，覆盖旧值。

js实现cookies

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

删除Cookie

设置过期时间为过去的时间，使Cookie失效。

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

封装工具函数

完整工具类示例：

const CookieHelper = {
  set(name, value, days = 30, path = "/") {
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=${path}`;
  },
  get(name) {
    const value = document.cookie.match(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`);
    return value ? decodeURIComponent(value.pop()) : null;
  },
  remove(name, path = "/") {
    this.set(name, "", -1, path);
  }
};

// 使用示例
CookieHelper.set("theme", "dark");
console.log(CookieHelper.get("theme")); // 输出: dark
CookieHelper.remove("theme");