JavaScript Cookie[编辑 | 编辑源代码]

JavaScript Cookie 是浏览器存储在用户计算机上的小型文本数据，通常用于保存用户的会话信息、偏好设置或跟踪用户行为。它是 BOM（浏览器对象模型）的一部分，通过 document.cookie 属性进行访问和操作。Cookie 在 Web 开发中广泛用于状态管理，但由于其存储容量有限（通常每个 Cookie 不超过 4KB），现代 Web 应用也常结合 Web Storage（如 localStorage 和 sessionStorage）使用。

基本概念[编辑 | 编辑源代码]

Cookie 是由服务器通过 HTTP 响应头 Set-Cookie 发送给浏览器，或由客户端 JavaScript 直接设置。每个 Cookie 包含以下属性：

名称（Name）：Cookie 的唯一标识。
值（Value）：存储的数据。
域（Domain）：指定哪些域名可以访问该 Cookie。
路径（Path）：指定服务器上的路径范围。
过期时间（Expires/Max-Age）：定义 Cookie 的有效期。
安全标志（Secure）：仅通过 HTTPS 传输。
HttpOnly：禁止 JavaScript 访问，防止 XSS 攻击。

Cookie 的作用[编辑 | 编辑源代码]

会话管理（如用户登录状态）。
个性化设置（如主题偏好）。
行为跟踪（如分析用户访问路径）。

操作 Cookie[编辑 | 编辑源代码]

读取 Cookie[编辑 | 编辑源代码]

通过 document.cookie 获取当前域名下的所有 Cookie（格式为 name=value 的字符串，以分号分隔）：

// 读取所有 Cookie
const allCookies = document.cookie;
console.log(allCookies); // 输出: "username=John; theme=dark"

写入 Cookie[编辑 | 编辑源代码]

通过赋值 document.cookie 设置 Cookie（需包含名称、值和可选属性）：

// 设置一个 Cookie，有效期为 7 天
document.cookie = "username=John; expires=" + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";

删除 Cookie[编辑 | 编辑源代码]

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

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

实际案例[编辑 | 编辑源代码]

案例1：记住用户偏好[编辑 | 编辑源代码]

以下代码演示如何保存和读取用户的主题偏好：

// 保存主题偏好
function setTheme(theme) {
    document.cookie = `theme=${theme}; max-age=31536000; path=/`; // 有效期 1 年
}

// 读取主题偏好
function getTheme() {
    const cookies = document.cookie.split(';').map(c => c.trim());
    const themeCookie = cookies.find(c => c.startsWith('theme='));
    return themeCookie ? themeCookie.split('=')[1] : 'light';
}

// 应用主题
document.body.className = getTheme();

案例2：会话管理[编辑 | 编辑源代码]

模拟用户登录状态：

// 登录时设置 Cookie
function login(username) {
    document.cookie = `session=${username}; Secure; HttpOnly; path=/`;
}

// 检查登录状态
function checkSession() {
    const sessionCookie = document.cookie.split('; ').find(c => c.startsWith('session='));
    return sessionCookie ? sessionCookie.split('=')[1] : null;
}