JavaScript Cookie
Cookies 是一种在客户端（通常是浏览器）存储少量数据的方式，这些数据通常用于跟踪用户会话、存储用户偏好设置、实现购物车功能等。虽然现代 Web 开发中越来越倾向于使用更高级的存储机制（如 LocalStorage 和 IndexedDB），但 Cookies 仍然在许多场景中发挥着重要作用。
1. Cookie 的基本概念
- 名称（Name）：Cookie 的唯一标识符。
- 值（Value）：存储在 Cookie 中的实际数据。
- 过期时间（Expires/Max-Age）：指定 Cookie 的有效期。
- 路径（Path）：指定 Cookie 可以被哪些 URL 访问。
- 域（Domain）：指定 Cookie 可以被哪些域名访问。
- 安全标志（Secure）：如果设置了此标志，Cookie 只能通过 HTTPS 连接发送。
- HttpOnly 标志：如果设置了此标志，Cookie 不能通过 JavaScript 访问，增加了安全性。
2. 创建和设置 Cookie
在 JavaScript 中，设置 Cookie 通常通过 document.cookie 属性来完成。不过，直接操作 document.cookie 并不直观，因为它是一个只读的字符串，包含了所有当前域名下的 Cookie。要设置一个新的 Cookie，你需要构建一个符合 Cookie 格式的字符串，并将其赋值给 document.cookie。
// 设置一个名为 "username" 的 Cookie，值为 "JohnDoe"，有效期为 7 天
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 使用示例
setCookie("username", "JohnDoe", 7);
3. 读取 Cookie
读取 Cookie 稍微复杂一些，因为 document.cookie 返回的是一个包含所有 Cookie 的字符串，每个 Cookie 之间用分号和空格分隔。你需要解析这个字符串来找到你感兴趣的 Cookie。
// 获取名为 "username" 的 Cookie 的值
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// 使用示例
var username = getCookie("username");
console.log(username); // 输出: JohnDoe
4. 删除 Cookie
删除 Cookie 的方法是将 Cookie 的过期时间设置为一个过去的日期。这样，浏览器在下次清理 Cookie 时就会删除它。
// 删除名为 "username" 的 Cookie
function eraseCookie(name) {
document.cookie = name + '=; Max-Age=-99999999;'; // 也可以使用 expires 设置一个过去的日期
}
// 使用示例
eraseCookie("username");
5. 安全性和隐私
- HttpOnly：设置 HttpOnly 标志可以防止 JavaScript 访问 Cookie，从而减少 XSS（跨站脚本）攻击的风险。这个标志需要在服务器端设置。
- Secure：设置 Secure 标志可以确保 Cookie 只能通过 HTTPS 连接发送，增加了传输过程中的安全性。
- 避免敏感数据：不要在 Cookie 中存储敏感信息，如密码、信用卡号等。
- 限制域和路径：通过限制 Cookie 的域和路径，可以减少不必要的暴露和潜在的安全风险。
6. 现代替代方案
虽然 Cookies 在许多场景中仍然很有用，但现代 Web 开发中越来越倾向于使用更高级的存储机制，如 LocalStorage、SessionStorage 和 IndexedDB。这些机制提供了更大的存储容量、更好的性能和更灵活的数据操作能力。
通过遵循这些步骤和注意事项，你可以有效地使用 Cookies 在客户端存储和检索数据。然而，请始终牢记安全性和隐私性的最佳实践，以确保你的应用程序和用户数据的安全。
本文地址：https://www.tides.cn/p_js-cookie