JavaScript 操作 Cookie 完整指南：设置、读取与删除

作者：极速慢跑时间：2026-10-31 17:26:39浏览：323

本文详解如何使用 JavaScript 通过 document.cookie 属性操作 Cookie，涵盖设置、获取、删除及安全策略。内容包括 expires、path、domain、secure 和 SameSite 等关键参数的具体用法，结合登录状态保持与语言偏好保存的实际代码示例，帮助开发者安全高效地管理客户端存储。

在前端开发领域，Cookie 是一种广泛使用的客户端数据存储机制。JavaScript 内置了多种处理 Cookie 的手段，涵盖创建、读取及移除等操作。下文将深入解析利用 JavaScript 管理 Cookie 的具体方法，并辅以实际项目中的代码案例进行说明。

1. 什么是 Cookie

Cookie 是保存在用户浏览器内的小型数据片段，主要用途是在客户端侧存储用户相关信息。服务器端可在 HTTP 请求中读取这些 Cookie 数据。其常见应用场景包括维持用户登录状态、记录语言偏好以及保存主题设置等。

Cookie 采用键值对格式，例如：username=JohnDoe
Cookie 的生命周期设定：可配置为会话级（浏览器关闭即失效）或持久性（指定具体的过期时间）。

2. 如何使用 JavaScript 设置 Cookie

设置 Cookie 的基本语法规范

在 JavaScript 环境中，修改 document.cookie 属性即可设置 Cookie。其基本语法结构如下：

document.cookie = "key=value; expires=expiration_date; path=path; domain=domain; secure";

key=value：定义 Cookie 的名称及其对应的值。
expires：指定 Cookie 的过期时间，必须采用 UTC 格式的日期字符串。若未指定此参数，Cookie 将在浏览器会话结束时自动失效。
path：定义 Cookie 生效的路径范围（默认值为当前路径）。
domain：指定 Cookie 有效的域名范围。
secure：若设置此标志，表明该 Cookie 仅能通过 HTTPS 协议进行传输。

示例：设置一个简单的 Cookie

document.cookie = "username=JohnDoe";

该 Cookie 在当前浏览器会话期间有效，直至浏览器窗口关闭。

示例：设置带过期时间的 Cookie

const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 设置 7 天后过期
const expires = "expires=" + date.toUTCString();
document.cookie = "username=JohnDoe; " + expires + "; path=/";

说明：该 Cookie 将在 7 天后过期，且在整个网站的所有路径下均有效。

设置 Cookie 时的一些常见选项说明

expires：用于设定 Cookie 的过期时间。可通过 Date 对象计算未来的具体过期时刻。
path：设定 Cookie 生效的路径，默认值为当前路径。若设置为 /，则对整个网站有效。
domain：指定 Cookie 适用的域名范围。若设置为 example.com，则该域名下的所有子域均可访问此 Cookie。
secure：标志位，表示 Cookie 仅能在 HTTPS 协议下传输。
SameSite：控制 Cookie 在跨站请求中的发送行为，可选值包括 Strict、Lax 或 None。

示例：设置带多选项的 Cookie

const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 设置 7 天后过期
const expires = "expires=" + date.toUTCString();
document.cookie = "theme=dark; " + expires + "; path=/; secure; samesite=Strict";

3. 如何获取 Cookie

获取 Cookie 需通过读取 document.cookie 属性实现，但返回结果是一个包含所有 Cookie 的字符串，格式为 key=value 对，多个 Cookie 之间以分号 ; 分隔。

获取单个 Cookie

function getCookie(name) {
  const nameEq = name + "=";
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    if (cookies[i].startsWith(nameEq)) {
      return cookies[i].substring(nameEq.length);
    }
  }
  return null; // 如果没有找到对应的 Cookie，返回 null
}

// 使用示例
const username = getCookie("username");
console.log(username); // 输出 Cookie 中 "username" 的值

获取所有 Cookie

function getAllCookies() {
  const cookies = document.cookie.split("; ");
  const cookieObj = {};
  cookies.forEach(cookie => {
    const [key, value] = cookie.split("=");
    cookieObj[key] = value;
  });
  return cookieObj;
}

const allCookies = getAllCookies();
console.log(allCookies); // 输出所有 Cookie 的对象形式

4. 如何删除 Cookie

删除 Cookie 的方法是将该 Cookie 的过期时间设置为过去的时间点。

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

// 使用示例
deleteCookie("username");

说明：通过将 Cookie 的过期时间设置为过去的日期，浏览器会自动删除该 Cookie。

5. 实际项目中的 Cookie 应用示例

示例 1：实现记住用户登录状态

许多网站利用 Cookie 来保持用户的登录状态。通过将用户的 sessionId 或登录凭证保存在 Cookie 中，下次访问时系统可自动识别用户是否已登录。

// 用户登录时设置 Cookie
function setLoginCookie(username) {
  const date = new Date();
  date.setTime(date.getTime() + (30 * 60 * 1000)); // 30 分钟后过期
  const expires = "expires=" + date.toUTCString();
  document.cookie = `username=${username}; ${expires}; path=/`;
}

// 检查用户是否已登录
function checkLogin() {
  const username = getCookie("username");
  if (username) {
    console.log(`Welcome back, ${username}!`);
  } else {
    console.log("User not logged in.");
  }
}

// 登录时调用
setLoginCookie("JohnDoe");

// 检查登录状态
checkLogin();

示例 2：保存用户语言偏好

通过 Cookie 存储用户选择的语言设置，下次访问时自动加载用户的语言偏好。

// 设置语言 Cookie
function setLanguagePreference(language) {
  const date = new Date();
  date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 1 年后过期
  const expires = "expires=" + date.toUTCString();
  document.cookie = `lang=${language}; ${expires}; path=/`;
}

// 获取用户语言偏好
function getLanguagePreference() {
  return getCookie("lang") || "en"; // 默认语言为英文
}

// 使用示例
setLanguagePreference("fr"); // 设置为法语
console.log(getLanguagePreference()); // 输出 "fr"