关键要点
- Cookie 是存储在用户计算机上的小文本文件，用于记录用户信息。
- JavaScript 可通过
document.cookie创建、读取、修改和删除 Cookie。 - Cookie 有属性如过期时间、路径、域名等，需注意安全设置如
secure和HttpOnly。 - 可使用函数或库（如
js-cookie）简化操作，适合保持登录状态或存储偏好。
创建和使用 Cookie
使用 document.cookie 设置 Cookie，例如：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";读取所有 Cookie：var x = document.cookie; 返回如 "cookie1=value; cookie2=value;"。
修改和删除类似，需设置过期时间或覆盖值。
示例函数
常用函数包括：
setCookie(cname, cvalue, exdays)：设置 Cookie，带过期天数。getCookie(cname)：获取特定 Cookie 值。checkCookie()：检查是否存在，提示输入并存储。
安全和工具
注意 secure（仅 HTTPS）和 HttpOnly（防止 JavaScript 访问）属性。
可使用 js-cookie 库 简化操作，如 Cookies.set('name', 'value');。
详细报告
JavaScript Cookie 是前端开发中用于存储用户信息的常见工具，广泛应用于保持登录状态、存储用户偏好或跟踪用户行为。以下是全面的中文讲解，涵盖基本概念、操作方法、属性设置和安全注意事项，基于多个权威资源整理。
什么是 Cookie？
Cookie 是服务器发送到用户浏览器并保存在本地的一小段文本数据，通常以名/值对形式存储，例如 "username=John Doe"。浏览器会在后续请求中将 Cookie 发送回服务器，使基于无状态的 HTTP 协议能够记录稳定的状态信息。Cookie 的主要用途包括：
- 保持用户登录状态（如会话管理）。
- 存储用户偏好设置（如语言选择）。
- 跟踪用户行为（如广告跟踪）。
在 JavaScript 中，开发者主要通过 document.cookie 属性来操作 Cookie。需要注意的是，Cookie 的大小通常限制在 4KB，且每个域名下 Cookie 数量有限（通常 20-50 个，具体取决于浏览器）。
在 JavaScript 中操作 Cookie
创建 Cookie
使用 document.cookie 可以创建 Cookie，其语法为：
document.cookie = "name=value; expires=date; path=path; domain=domain; secure; HttpOnly";- 示例：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";- 说明：
name=value是必填项，定义 Cookie 的名称和值。expires设置过期时间（GMT 格式），如果不设置，Cookie 为会话 Cookie，在浏览器关闭时删除。path指定 Cookie 的路径，默认为当前页面路径，设置为/表示对整个域名有效。domain指定 Cookie 的域名，默认为当前域名，支持子域名（如.example.com）。secure表示仅通过 HTTPS 传输。HttpOnly表示 Cookie 不能通过 JavaScript 访问，仅用于 HTTP 请求，防止 XSS 攻击。
读取 Cookie
使用 document.cookie 可以读取所有 Cookie，返回一个字符串，格式如 "cookie1=value; cookie2=value;"。
- 示例：
var allCookies = document.cookie;
console.log(allCookies); // 输出如 "username=John Doe; favorite_food=pizza;"- 注意：
document.cookie返回所有 Cookie，需要通过解析字符串来获取特定 Cookie 的值。例如，使用split(';')分割后，再查找特定名称。
修改 Cookie
修改 Cookie 与创建类似，直接设置新的值会覆盖旧值。例如：
document.cookie = "username=Jane Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";旧的 "username=John Doe" 将被替换。
删除 Cookie
删除 Cookie 的方法是设置 expires 为过去的日期，例如：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";浏览器会将该 Cookie 标记为已过期并删除。
Cookie 的属性和安全设置
Cookie 支持多种属性，影响其作用范围和安全性：
path: 指定 Cookie 的路径，默认为当前页面路径。设置为/表示对整个域名有效。domain: 指定 Cookie 的域名，默认为当前域名，支持子域名（如.example.com）。注意，设置子域名时需加前导点。max-age: 指定 Cookie 的最大生存时间（以秒为单位），优先级高于expires。expires: 指定 Cookie 的过期时间（GMT 格式）。secure: 仅通过 HTTPS 传输，防止中间人攻击。HttpOnly: 防止 JavaScript 访问，仅用于 HTTP 请求，缓解 XSS 攻击。
例如：
document.cookie = "sessionId=12345; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/; domain=.example.com; secure; HttpOnly";示例函数
直接使用 document.cookie 操作 Cookie 较为繁琐，开发者通常会编写辅助函数。以下是常见函数示例：
- setCookie(cname, cvalue, exdays)
设置 Cookie，带过期天数。
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}- 示例使用：
setCookie("username", "John Doe", 365);// 存储 365 天。
- getCookie(cname)
获取特定 Cookie 的值。
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}- 示例使用：
var user = getCookie("username");// 返回 “John Doe” 或 “”。
- checkCookie()
检查 Cookie 是否存在，如果不存在则提示用户输入并存储。
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}- 示例使用：页面加载时调用
checkCookie()，存储用户名 30 天。
以下表格总结常见 Cookie 操作：
| 操作 | 方法 | 示例 |
|---|---|---|
| 创建 | document.cookie = "name=value; ..." | document.cookie = "username=John; expires=...; path=/;" |
| 读取 | document.cookie | var x = document.cookie; |
| 修改 | 覆盖旧值 | document.cookie = "username=Jane; ...;" |
| 删除 | 设置 expires 为过去时间 | document.cookie = "username=; expires=Thu, 01 Jan 1970 ...;" |
库和工具
除了原生的 document.cookie，还可以使用第三方库简化 Cookie 操作。例如，js-cookie 是一个轻量级的 JavaScript 库，提供了更简单的 API：
- 安装：
npm install js-cookie - 使用示例：
- 设置 Cookie：
Cookies.set('name', 'value'); - 获取 Cookie：
Cookies.get('name'); - 删除 Cookie：
Cookies.remove('name'); - 文档参考：GitHub – js-cookie/js-cookie
js-cookie 支持设置过期时间、路径等属性，适合需要频繁操作 Cookie 的场景。
安全注意事项
Cookie 的使用需注意以下安全问题：
- XSS 攻击：通过
HttpOnly属性防止 JavaScript 访问敏感 Cookie（如会话 ID），缓解跨站脚本攻击。 - 中间人攻击：使用
secure属性确保 Cookie 仅通过 HTTPS 传输。 - 存储限制：Cookie 的大小通常限制在 4KB，每个域名下 Cookie 数量有限（通常 20-50 个），不适合存储大量数据。建议使用 Web Storage API（如 localStorage）存储客户端数据。
- 同源策略：Cookie 受同源策略限制，仅在相同协议、域名和路径下有效。
例如，MDN 建议：Document.cookie – Web API | MDN 中提到，HttpOnly 属性可防止 JavaScript 访问 Cookie，保护会话安全。
实际应用与注意事项
- 应用场景：Cookie 常用于保持用户登录状态、存储购物车信息或记录用户偏好。
- 性能影响：Cookie 会在每次 HTTP 请求中发送，可能增加网络开销。对于不需要服务器交互的数据，建议使用 localStorage 或 sessionStorage。
- 浏览器兼容性：
document.cookie在所有现代浏览器中支持，但需注意不同浏览器的 Cookie 数量和大小限制。
总结
JavaScript Cookie 是前端开发中存储用户信息的常用工具，通过 document.cookie 可以创建、读取、修改和删除 Cookie。了解其属性（如 expires、path、secure）和安全设置（如 HttpOnly）有助于更好地管理用户数据。使用辅助函数或库（如 js-cookie）可以简化操作，适合保持登录状态或存储偏好。