当前位置：首页 > JavaScript

js 实现保存cookie

2026-02-02 13:26:06JavaScript

保存 Cookie 的方法

在 JavaScript 中，可以通过 document.cookie 属性来保存 Cookie。以下是具体实现方式：

设置 Cookie

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

username=John Doe：键值对，表示 Cookie 的名称和值。
expires：可选，设置 Cookie 的过期时间（UTC 格式）。
path：可选，指定 Cookie 的有效路径，默认为当前路径。

设置带有 Max-Age 的 Cookie

js 实现保存cookie

document.cookie = "theme=dark; max-age=3600; path=/";

max-age：以秒为单位设置 Cookie 的有效期（例如 3600 秒 = 1 小时）。

设置 Secure 和 HttpOnly Cookie

document.cookie = "sessionId=abc123; secure; httponly";

secure：仅通过 HTTPS 传输 Cookie。
httponly：禁止 JavaScript 访问 Cookie（增强安全性）。

读取 Cookie

通过 document.cookie 可以读取当前域下的所有 Cookie：

js 实现保存cookie

const allCookies = document.cookie;
console.log(allCookies); // 输出格式如 "username=John Doe; theme=dark"

删除 Cookie

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

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

封装 Cookie 操作函数

以下是一个封装了 Cookie 操作的实用函数：

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

function getCookie(name) {
  const cookies = document.cookie.split(";");
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.trim().split("=");
    if (cookieName === name) return decodeURIComponent(cookieValue);
  }
  return null;
}

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