编辑“︁JavaScript Cookie”︁（章节）

= JavaScript Cookie =

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

== 基本概念 ==
Cookie 是由服务器通过 HTTP 响应头 <code>Set-Cookie</code> 发送给浏览器，或由客户端 JavaScript 直接设置。每个 Cookie 包含以下属性：
* '''名称（Name）'''：Cookie 的唯一标识。
* '''值（Value）'''：存储的数据。
* '''域（Domain）'''：指定哪些域名可以访问该 Cookie。
* '''路径（Path）'''：指定服务器上的路径范围。
* '''过期时间（Expires/Max-Age）'''：定义 Cookie 的有效期。
* '''安全标志（Secure）'''：仅通过 HTTPS 传输。
* '''HttpOnly'''：禁止 JavaScript 访问，防止 [[Cross-site scripting|XSS]] 攻击。

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

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

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

=== 写入 Cookie ===
通过赋值 <code>document.cookie</code> 设置 Cookie（需包含名称、值和可选属性）：

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

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

<syntaxhighlight lang="javascript">
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
</syntaxhighlight>

== 实际案例 ==
=== 案例1：记住用户偏好 ===
以下代码演示如何保存和读取用户的主题偏好：

<syntaxhighlight lang="javascript">
// 保存主题偏好
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();
</syntaxhighlight>

=== 案例2：会话管理 ===
模拟用户登录状态：

<syntaxhighlight lang="javascript">
// 登录时设置 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;
}
</syntaxhighlight>

== 安全性考虑 ==
* '''HttpOnly'''：防止 XSS 攻击窃取 Cookie。
* '''Secure'''：仅通过 HTTPS 传输。
* '''SameSite'''：限制跨站请求时发送 Cookie（可选值：<code>Strict</code>、<code>Lax</code>、<code>None</code>）。

== 替代方案 ==
对于更复杂的数据存储需求，可考虑：
* '''[[Web Storage]]'''：<code>localStorage</code>（永久存储）和 <code>sessionStorage</code>（会话级存储）。
* '''IndexedDB'''：浏览器端数据库，支持大量结构化数据。

== 总结 ==
JavaScript Cookie 是 Web 开发中基础但重要的状态管理工具，适合存储小型、非敏感数据。开发者需注意其安全性和存储限制，合理选择存储方案。

<mermaid>
graph TD
    A[用户访问网站] --> B{服务器设置 Cookie}
    B -->|Set-Cookie| C[浏览器存储 Cookie]
    C --> D[后续请求携带 Cookie]
    D --> E[服务器读取 Cookie]
</mermaid>

<math>
\text{Cookie 大小限制} \leq 4\text{KB}
</math>

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]