1. 介绍
在使用 JavaScript 进行网页开发时，Cookie 被广泛用作存储用户相关信息的重要机制。
例如，它们常用于保持登录会话或存储购物车数据，从而显著提升用户的便利性。
然而，对于初学者来说，“Cookie 是什么？”或“如何使用 JavaScript 操作 Cookie？”等概念可能比较难以理解。
本文将对 JavaScript Cookie 处理 进行详细阐述，从基础概念到高级用法。
通过实用的代码示例，本指南旨在为初学者和中级开发者提供帮助。
2. 什么是 Cookie？
Cookie 的基本概念
Cookie 是存储在网页浏览器中的一小段数据。
它主要用于以下目的：
- 存储用户在网站上输入的信息（例如登录凭证）。
- 记录访客行为，以用于营销和分析。
- 保留配置信息（例如语言偏好或主题设置），以提升用户体验。
Cookie 的工作原理
Cookie 由 键值对 组成，存储格式如下：
name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/
在此示例中，键 name 被赋予值 value，并附带了过期日期和指定的路径。
Cookie 的主要组成部分
- 名称和值（name=value） – Cookie 的基本信息。
- 过期时间（expires 或 max-age） – 指定 Cookie 的有效期限。
- 路径（Path） – 定义 Cookie 可访问的目录或页面。
- Secure 属性 – 确保 Cookie 仅在 HTTPS 连接中发送。
- SameSite 属性 – 有助于防止跨站请求攻击（CSRF）。
这些灵活的设置使得 Cookie 在提升用户体验的同时，也能加强安全性。
3. JavaScript 中的基础 Cookie 操作
在 JavaScript 中，Cookie 通过 document.cookie 属性进行操作。
本节将介绍基本的操作方法。
设置 Cookie
下面是创建新 Cookie 的示例：
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
关键点：
username=John：指定键和值。expires：设置过期日期。如果省略，浏览器关闭时 Cookie 将被删除。path=/：使 Cookie 在整个站点范围内可用。
获取 Cookie
可以通过以下方式获取所有 Cookie：
console.log(document.cookie);
示例输出：
username=John; theme=dark; lang=ja
由于多个 Cookie 之间使用分号（;）分隔，在处理单个值时需要对字符串进行拆分。
删除 Cookie
要删除 Cookie，只需将其过期日期设为过去的时间即可。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
上述代码会删除名为 username 的 Cookie。
4. Cookie 属性设置
Cookie 属性在安全性和过期控制方面起着重要作用。
设置过期时间
- 使用 expires 属性（基于日期）
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
- 使用 max-age 属性（基于秒数）
document.cookie = "username=John; max-age=3600; path=/";
此配置会在一小时后自动删除 Cookie。
安全属性
- secure 属性（仅限 HTTPS）
document.cookie = "username=John; secure";
- SameSite 属性（跨站请求保护）
document.cookie = "username=John; SameSite=Strict";
通过正确配置这些属性，可显著提升安全性和隐私保护水平。
5. 实用代码示例
统计用户访问次数
function getCookie(name) {
let cookies = document.cookie.split('; ');
for (let i = 0; i < cookies.length; i++) {
let parts = cookies[i].split('=');
if (parts[0] === name) return parts[1];
}
return null;
}
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);
此代码将用户访问次数存储在 cookie 中，并在每次访问时更新计数。
6. 使用第三方库
虽然可以使用 JavaScript 中的 document.cookie 属性来管理 cookie，但处理字符串和设置属性往往会变得繁琐。
这通常导致代码更长，可读性降低。
为了简化 cookie 管理，使用 第三方库 是一种常见且有效的方法。
本节我们重点介绍最流行的库之一：js-cookie。
1. 什么是 js-cookie 库？
js-cookie 是一个轻量级的 JavaScript 库，简化了 cookie 操作。
其主要特性包括：
- 简洁的 API ：轻松设置、获取和删除 cookie。
- 可扩展性和灵活性 ：支持安全选项和自定义配置。
- 轻量级 ：压缩后仅约 2 KB。
2. 安装 js-cookie
通过 CDN 加载
在 HTML 文件的 <head> 标签内添加以下代码。
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
通过 npm 或 yarn 安装
如果在项目中管理依赖，请使用以下命令之一：
npm install js-cookie
或
yarn add js-cookie
3. 基本用法
设置 Cookie
Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days
获取 Cookie
let username = Cookies.get('username');
console.log(username); // Output: John
删除 Cookie
Cookies.remove('username');
4. 高级选项设置
设置过期时间和路径
Cookies.set('session', 'active', { expires: 1, path: '/' });
- expires ：1 天后过期。
- path ：使 cookie 在整个站点范围内可用。
添加 secure 属性
Cookies.set('secureData', 'secret', { secure: true });
- secure: true ：仅在 HTTPS 下发送 cookie。
指定 SameSite 属性
Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });
- sameSite: ‘Strict’ ：阻止跨站请求，提升安全性。
7. 安全性与隐私考虑
在 JavaScript 中使用 cookie 时，安全措施 与 隐私保护 极为重要。
处理不当可能导致数据泄露或未授权访问。
本节阐述安全 cookie 管理的最佳实践。
1. 安全措施
使用 HTTPS 和 Secure 属性
设置 Secure 属性，使 cookie 仅在 HTTPS 连接中发送。
这有助于防止数据被拦截或篡改。
示例：
document.cookie = "sessionID=abc123; Secure";
使用第三方库 js-cookie 时，可按如下方式配置：
Cookies.set('sessionID', 'abc123', { secure: true });
使用 HttpOnly 属性（服务器端配置）
JavaScript 无法在客户端设置 HttpOnly 属性。
但在服务器端配置该属性可帮助防止
XSS（跨站脚本） 攻击。
示例：服务器端配置（PHP）
setcookie('sessionID', 'abc123', [
'httponly' => true,
'secure' => true,
'samesite' => 'Strict'
]);
使用 SameSite 属性防止 CSRF 攻击
为了防止 CSRF（跨站请求伪造） 攻击，
请配置 SameSite 属性。
示例：
document.cookie = "token=secureToken; SameSite=Strict";
2. 隐私保护
限制存储信息的类型
避免在 Cookie 中存储个人或敏感信息（例如密码）。
相反，存储匿名标识符，如会话 ID，并在服务器端进行验证。
示例：使用会话 ID
Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });
符合 GDPR 与隐私法规的要求
由于欧盟的 GDPR（通用数据保护条例）
以及日本的 个人信息保护法 等法规，
在使用 Cookie 时需满足以下要求：
- 强制用户同意：必须告知用户 Cookie 的使用目的并获取明确同意。
- 提供选择加入和退出的选项：用户必须能够拒绝非必要的 Cookie。
示例：Cookie 同意横幅（JavaScript）
if (!Cookies.get('cookieConsent')) {
let consent = confirm('This site uses cookies. Do you allow cookies?');
if (consent) {
Cookies.set('cookieConsent', 'true', { expires: 365 });
}
}
8. 如何在浏览器中检查 Cookie
在使用 JavaScript 设置、获取或删除 Cookie 时，
可以通过 浏览器开发者工具 验证其行为。
本节介绍在主流浏览器中检查 Cookie 的方法。
1. 在 Google Chrome 中检查 Cookie
打开开发者工具
- 右键单击页面并选择 “检查” 或 “检查元素”。
- 或者按 F12 或 Ctrl + Shift + I（Mac 上为 Cmd + Opt + I）。
查看 Cookie 的步骤
- 在开发者工具中选择 “Application” 选项卡。
- 在左侧菜单中点击 “Storage” → “Cookies”。
- 从列表中选择目标域名。
查看 Cookie 详细信息
所选站点的 Cookie 以表格形式显示。
每一列代表以下信息：
| Column | Description |
|---|---|
| Name | Cookie name (key) |
| Value | Stored value |
| Domain | Applicable domain |
| Path | Applicable path |
| Expires / Max-Age | Expiration date |
| Size | Cookie size (bytes) |
| HttpOnly | Whether HttpOnly is enabled (not accessible via JavaScript) |
| Secure | Whether Secure is enabled (HTTPS only) |
| SameSite | SameSite setting (Strict, Lax, None) |
编辑和删除 Cookie
- 编辑：双击行即可修改其值。
- 删除：选中行后按 Delete 键，或右键选择 Delete。
2. 在 Firefox 中检查 Cookie
打开开发者工具
- 右键单击页面并选择 “检查”。
- 或者按 F12 或 Ctrl + Shift + I。
查看 Cookie
- 选择 “Storage” 选项卡。
- 从左侧菜单点击 “Cookies”。
- 从显示的域名列表中选择目标站点。
编辑和删除
与 Chrome 类似，您可以直接编辑值或删除 Cookie。
3. 在 Safari（Mac 用户）中检查 Cookie
启用开发者工具
- 从 Safari 菜单打开 “设置”。
- 选择 “高级” 选项卡并勾选 “在菜单栏中显示 Develop 菜单”。
打开开发者工具
- 右键单击页面并选择 “检查元素”。
- 或者按 Cmd + Opt + I。
查看 Cookie
- 选择 “Storage” 选项卡。
- 选择 “Cookies” 以查看其内容。
4. 通过控制台检查 Cookie
也可以使用 JavaScript 控制台 检查 Cookie。
示例：显示所有 Cookie
console.log(document.cookie);
示例：获取特定 Cookie
let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);
也可以直接在控制台中添加或删除 Cookie。
9. 总结
在前面的章节中，我们已经介绍了 JavaScript 中的 Cookie 处理，从基本概念到高级用例。本节回顾关键要点并总结实用的最佳实践。
1. Cookie 基础及其工作原理
Cookie 是一种在网页浏览器中存储少量数据的机制。
- 使用场景：维护登录会话、管理用户偏好以及跟踪行为。
- 组成部分：键值对、过期设置、路径、域以及安全属性。
理解这些基础知识可以让你灵活地将 Cookie 适配到各种场景中。
2. JavaScript 中的 Cookie 操作
在 JavaScript 中，你可以通过 document.cookie 属性轻松地设置、获取和删除 Cookie。
示例：设置 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
示例：获取 Cookie
console.log(document.cookie);
示例：删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
这些示例涵盖了基础，但对于更复杂的需求，建议使用第三方库。
3. 使用第三方库
库可以显著简化 Cookie 管理，使代码更易读。
使用 js-cookie 的示例
Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');
优势：
- 代码简短且直观。
- 安全属性和选项配置方便。
- 跨浏览器兼容性良好。
4. 安全与隐私措施
Cookie 应始终配合适当的 安全设置 与 隐私保护 使用。
关键安全实践
- 使用 HTTPS 并设置 Secure 属性：防止数据被拦截。
- 设置 SameSite 属性：防御 CSRF 攻击。
- 使用 HttpOnly 属性：降低 XSS 攻击风险（需服务器端配置）。
关键隐私实践
- 不要存储个人信息：仅存储 ID 或令牌，实际数据在服务器端管理。
- 遵守法规：依据 GDPR 等相关法律实现同意管理。
- 加密敏感数据：在存储前始终对关键信息进行加密。
5. 验证与调试 Cookie
使用开发者工具可以高效地验证和调试 Cookie 的行为。
各浏览器的工具
- Google Chrome：功能强大且界面友好。
- Firefox：提供高级存储管理功能。
- Edge 与 Safari：可通过类似 Chrome 的步骤进行管理。
使用 JavaScript 控制台
console.log(document.cookie);
这使得快速测试和调试成为可能。
6. 实用最佳实践
以下是安全高效的 Cookie 管理的具体建议：
- 仅存储最小必要数据：避免不必要的 Cookie，将关键数据放在服务器端管理。
- 设置合适的过期时间：使用较短的过期时间，并删除不再使用的 Cookie。
- 强化安全设置：始终配置 Secure、HttpOnly 和 SameSite 属性。
- 获取用户同意：部署符合 GDPR 等隐私法规的同意横幅。
- 有效使用调试工具：定期使用浏览器开发者工具检查 Cookie。
- 利用第三方库：使用如 js-cookie 等库简化管理并提升可读性。
结论
本文对 JavaScript 中的 Cookie 管理进行了全面概述，涵盖了从基础使用到安全与隐私的各个方面。
关键要点
- Cookies 工作原理的基础以及何时使用它们。
- 使用 JavaScript 设置、获取和删除 Cookie。
- 安全措施和法律合规的重要性。
- 使用开发者工具和第三方库实现高效工作流。
下一步
将本指南作为参考，在实际项目中实现 Cookie 管理。
为了在不断变化的隐私法下保持安全和合规，
持续学习并定期审查最佳实践至关重要。
持续融合新技术和新知识，以构建更安全、
更友好的 Web 应用。
