异常教程

HTML DOM cookie 属性（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在互联网世界中，网站如何记住用户的登录状态、偏好设置或购物车内容？这背后离不开一种基础却强大的技术——HTML DOM cookie 属性。它如同网站的“记忆芯片”，通过简单的键值对存储机制，为用户带来无缝的交互体验。无论是电商网站的购物车功能，还是论坛的用户登录状态，Cookie 都是实现这些功能的核心工具之一。本文将从基础概念到实战应用，逐步解析这一技术的原理与实现方法，帮助开发者深入掌握 HTML DOM cookie 属性 的使用技巧。

一、Cookie 的基础概念与工作原理

1.1 什么是 Cookie？

Cookie 是由服务器或客户端（如浏览器）生成的一小段文本信息，存储在用户的浏览器中。当用户再次访问同一网站时，浏览器会将 Cookie 的内容发送回服务器，从而实现“记住用户”的功能。

形象比喻：可以将 Cookie 想象为一家餐厅的“会员卡”。每次你到餐厅用餐，服务员通过会员卡上的信息（如姓名、偏好菜品）快速识别你，并提供个性化服务。Cookie 的作用类似，但它是通过浏览器和服务器之间的“数字对话”实现的。

1.2 Cookie 的核心组成

一个 Cookie 通常包含以下信息：

  • 名称（Name）：唯一标识符，如 user_id。
  • 值（Value）：存储的具体数据，如用户的登录凭证。
  • 过期时间（Expires）：Cookie 的有效期，未设置则默认为关闭浏览器时失效。
  • 路径（Path） 和 域（Domain）：定义 Cookie 的适用范围，确保安全性。
  • 安全标志（Secure） 和 HttpOnly 标志：增强传输和存储的安全性。

1.3 Cookie 的生命周期

Cookie 的创建、读取和删除均通过浏览器的 document.cookie 属性实现。其工作流程如下：

  1. 设置 Cookie：服务器或客户端通过代码生成 Cookie 并发送给浏览器。
  2. 存储 Cookie：浏览器将 Cookie 存储在本地文件或内存中。
  3. 发送 Cookie：当用户再次访问相关页面时，浏览器自动将 Cookie 附加在 HTTP 请求头中发送给服务器。
  4. 读取与处理：服务器解析 Cookie 内容，执行相应的逻辑（如验证用户身份）。

二、通过 JavaScript 操作 Cookie 的核心方法

2.1 读取 Cookie

通过 document.cookie 属性可以获取当前页面的所有 Cookie 信息。其返回值是一个以分号分隔的字符串，格式为 name1=value1; name2=value2。

代码示例：

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

2.2 设置 Cookie

设置 Cookie 需要将键值对以字符串形式赋值给 document.cookie，并可附加参数控制其行为。

代码示例：

// 设置一个名为 "user_theme" 的 Cookie，值为 "light"，有效期为 7 天
const expiresDate = new Date();
expiresDate.setDate(expiresDate.getDate() + 7);
document.cookie = `user_theme=light; expires=${expiresDate.toUTCString()}; path=/`;

2.3 删除 Cookie

删除 Cookie 的本质是设置其过期时间为过去时间，触发浏览器自动清除。

代码示例：

// 删除名为 "user_theme" 的 Cookie
document.cookie = "user_theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

三、进阶技巧：Cookie 的高级用法与注意事项

3.1 管理多个 Cookie

当有多个 Cookie 时，需通过字符串分割或正则表达式解析其内容。

代码示例：

// 获取特定名为 "username" 的 Cookie 值
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [cookieName, value] = cookie.split("=");
    if (cookieName === name) return value;
  }
  return null;
}

const username = getCookie("username");
console.log(username); // 输出: "John"

3.2 设置 Cookie 的过期时间

Cookie 的有效期可通过 Date 对象动态计算，例如设置 30 分钟后过期：

代码示例：

const thirtyMinutesLater = new Date();
thirtyMinutesLater.setMinutes(thirtyMinutesLater.getMinutes() + 30);
document.cookie = `session_token=randomToken123; expires=${thirtyMinutesLater.toUTCString()}`;

3.3 安全标志与传输限制

  • Secure 标志：确保 Cookie 仅通过 HTTPS 协议传输，防止中间人攻击。
  • HttpOnly 标志：防止通过 JavaScript 访问 Cookie，减少 XSS 攻击风险。

代码示例：

// 设置同时包含 Secure 和 HttpOnly 的 Cookie
document.cookie = "api_key=abc123; Secure; HttpOnly";

四、实际案例：Cookie 在 Web 开发中的应用

4.1 案例 1：用户登录状态保持

通过 Cookie 存储用户的登录凭证，实现“记住我”功能。

代码示例：

// 登录成功后设置 Cookie
function loginSuccess(username, token) {
  const expiresDate = new Date();
  expiresDate.setDate(expiresDate.getDate() + 7);
  document.cookie = `auth_token=${token}; expires=${expiresDate.toUTCString()}; path=/; HttpOnly`;
}

// 检查登录状态
function checkAuth() {
  const authToken = getCookie("auth_token");
  if (authToken) {
    // 发送请求验证 Token
  } else {
    // 跳转到登录页面
  }
}

4.2 案例 2：用户主题偏好存储

记录用户选择的页面主题，避免每次访问时重复选择。

代码示例：

// 设置用户主题
function setTheme(theme) {
  const expiresDate = new Date();
  expiresDate.setFullYear(expiresDate.getFullYear() + 1); // 有效期 1 年
  document.cookie = `user_theme=${theme}; expires=${expiresDate.toUTCString()}; path=/`;
}

// 加载主题设置
function applyTheme() {
  const savedTheme = getCookie("user_theme");
  if (savedTheme) {
    document.documentElement.setAttribute("data-theme", savedTheme);
  }
}

五、注意事项与最佳实践

5.1 隐私与合规性

Cookie 的使用需遵守 GDPR 等隐私保护法规。例如，需明确告知用户 Cookie 的用途，并提供关闭选项。

5.2 性能优化

Cookie 的数据会随每个 HTTP 请求发送，因此应避免存储大量数据。敏感信息（如密码）应加密存储。

5.3 同源策略限制

Cookie 的域和路径需严格匹配，否则可能因跨域问题失效。例如，子域名 blog.example.com 无法访问父域名 example.com 的 Cookie。

六、总结与展望

通过本文的讲解，开发者可以掌握 HTML DOM cookie 属性 的核心功能与实现方式。从基础的读写操作到高级的安全配置，Cookie 技术为 Web 应用提供了轻量级的存储方案。随着浏览器对隐私保护的加强，开发者需在用户体验与合规性之间找到平衡点。未来，随着 Web API 的持续演进，Cookie 可能与更现代的存储技术（如 Web Storage）协同工作，共同构建更安全、高效的 Web 环境。

希望本文能帮助开发者深入理解 Cookie 的原理与应用，为实际项目提供有价值的参考。

最新发布

查看更多文章