document.cookie

document.cookie 是 JavaScript 中用于操作浏览器 cookie 的一个属性。它允许开发者读取、创建、修改和删除与当前文档相关联的 cookie。Cookie 是一种存储在用户浏览器中的小型数据片段，通常用于保存用户的会话信息、偏好设置或其他需要在不同页面之间共享的数据。本文将详细介绍 document.cookie 的使用方法、工作原理以及一些注意事项。

1. 什么是 Cookie？

Cookie 是由服务器发送到用户浏览器并保存在本地的一小段数据。每当用户访问同一个网站时，浏览器会自动将这些数据发送回服务器。Cookie 通常用于以下场景：

– 会话管理：保存用户的登录状态、购物车内容等。

– 个性化设置：保存用户的主题偏好、语言设置等。

– 跟踪用户行为：记录用户的浏览历史，用于分析或广告投放。

2. document.cookie 的基本用法

document.cookie 是一个字符串属性，包含了当前文档的所有 cookie。每个 cookie 都是一个键值对，格式为 name=value，多个 cookie 之间用分号和空格分隔。

2.1 读取 Cookie

要读取当前文档的所有 cookie，可以直接访问 document.cookie：

javascript

console.log(document.cookie);

输出可能类似于：

“username=JohnDoe; theme=dark; sessionId=12345”

2.2 设置 Cookie

要设置一个新的 cookie，可以通过给 document.cookie 赋值来实现。赋值的格式为 name=value，还可以附加一些可选的属性，如 expires、path、domain、secure 等。

javascript

document.cookie = “username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/”;

在这个例子中，username=JohnDoe 是 cookie 的名称和值，expires 指定了 cookie 的过期时间，path 指定了 cookie 的作用路径。

2.3 修改 Cookie

修改 cookie 的方式与设置 cookie 相同。如果指定的 cookie 名称已经存在，那么它的值会被更新。

javascript

document.cookie = “username=JaneDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/”;

2.4 删除 Cookie

要删除一个 cookie，可以通过设置它的过期时间为过去的时间来实现。

javascript

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

3. Cookie 的属性

在设置 cookie 时，可以指定一些属性来控制它的行为。常见的属性包括：

– expires：指定 cookie 的过期时间。如果不设置，cookie 将在浏览器关闭时自动删除（会话 cookie）。

– path：指定 cookie 的作用路径。默认情况下，cookie 只在设置它的路径及其子路径下有效。

– domain：指定 cookie 的作用域。默认情况下，cookie 只在设置它的域名下有效。

– secure：如果设置了该属性，cookie 只能通过 HTTPS 协议传输。

– SameSite：控制 cookie 是否在跨站请求时发送。可以设置为 Strict、Lax 或 None。

4. 注意事项

– 大小限制：每个 cookie 的大小通常限制在 4KB 左右，且每个域名下的 cookie 总数也有限制（通常为 20 个左右）。

– 安全性：由于 cookie 可以被客户端脚本访问，因此不应在 cookie 中存储敏感信息（如密码）。可以使用 HttpOnly 标志来防止 JavaScript 访问某些敏感的 cookie。

– 跨域问题：默认情况下，cookie 只能在同一域名下共享。如果需要跨域共享 cookie，可以通过设置 domain 属性来实现，但需要注意安全性问题。

5. 示例代码

以下是一个完整的示例，展示了如何使用 document.cookie 来设置、读取和删除 cookie：

javascript

// 设置一个 cookie

document.cookie = “username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/”;

// 读取所有 cookie

console.log(document.cookie); // 输出: “username=JohnDoe”

// 修改 cookie

document.cookie = “username=JaneDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/”;

// 删除 cookie

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

6. 总结

document.cookie 是 JavaScript 中操作 cookie 的核心 API。通过它，开发者可以方便地管理用户的会话、偏好设置等信息。然而，使用 cookie 时需要注意其大小限制、安全性问题以及跨域共享的限制。合理使用 cookie 可以提升用户体验，但不当使用可能会导致安全漏洞或性能问题。