HTML网站Cookie如何设置与使用？

1. 什么是 Cookie？ (概念和作用)
2. Cookie 的工作原理 (服务器和浏览器如何配合)
3. 如何在 JavaScript 中操作 Cookie？ (核心代码)
4. Cookie 的属性详解 (控制 Cookie 的行为)
5. Cookie 的优缺点与安全考量
6. Cookie vs. LocalStorage / SessionStorage (现代 Web 开发的选择)

什么是 Cookie？

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上，你可以把它想象成网站发给你的“会员卡”或“身份证”，当你下次访问时，自动带上它,服务器就能认出你是谁。

主要作用：

• 会话状态管理：如用户登录状态、购物车、游戏分数等。
• 个性化设置：如用户的主题、语言偏好、记住用户名等。
• 追踪与分析：记录用户的行为，用于网站分析、广告投放等。

Cookie 的工作原理

Cookie 的工作流程是 服务器主导，浏览器配合 的过程。

1. 服务器发送 Cookie：当用户首次访问一个网站时（www.example.com/login），服务器在处理完请求后，会在 HTTP 响应头中添加一个 Set-Cookie 字段。

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 21 Oct 2025 07:28:00 GMT

2. 浏览器保存 Cookie：浏览器收到这个响应后，会解析 Set-Cookie 头，并将 session_id=abc123 这条信息保存起来，它会记住这条 Cookie 的作用范围（如 Path=/）和过期时间。

   
   （图片来源网络，侵删）

3. 浏览器自动携带 Cookie：之后，只要用户再次向 www.example.com 下的任何路径（如 /dashboard, /profile）发起请求，浏览器就会自动在 HTTP 请求头中携带这个 Cookie。

   GET /dashboard HTTP/1.1
   Host: www.example.com
   Cookie: session_id=abc123

4. 服务器读取 Cookie：服务器收到这个请求后，从 Cookie 请求头中读取 session_id，从而识别出用户身份,并返回对应的用户数据。

如何在 JavaScript 中操作 Cookie？

JavaScript 提供了 document.cookie 属性来读写 Cookie。

A. 读取 Cookie

document.cookie 返回的是一个字符串，包含了所有可访问的 Cookie，格式为 "cookie1=value1; cookie2=value2"。

// 获取所有 Cookie
const allCookies = document.cookie;
console.log(allCookies); //  "username=JohnDoe; theme=dark"
// 如果想获取某个特定的 Cookie，需要自己解析
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1);
    }
  }
  return null; // 未找到
}
const username = getCookie('username');
console.log('Username:', username); // 输出: Username: JohnDoe

B. 设置/创建 Cookie

设置 Cookie 的方式是给 document.cookie 赋值。注意： 这种赋值是追加操作，而不是覆盖所有 Cookie。

基本语法： document.cookie = "name=value";

示例：

// 设置一个简单的 Cookie
document.cookie = "username=Alice";
// 设置一个带有属性的 Cookie
document.cookie = "user_id=987; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

C. 删除 Cookie

Cookie 本身没有直接的“删除”方法，我们通过让 Cookie 立即过期来达到删除的效果。

方法： 将 expires 属性设置为一个过去的时间。

示例：

// 删除名为 'username' 的 Cookie
function deleteCookie(name) {
  // 将过期时间设置为过去的时间
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}
deleteCookie('username');

Cookie 的属性详解

在设置 Cookie 时，可以通过分号 分隔的属性来精确控制它的行为。

Cookie 的优缺点与安全考量

优点：

1. 兼容性好：所有浏览器都支持。
2. 服务器端可访问：即使没有 JavaScript，服务器也能通过 HTTP 请求头读取到 Cookie。
3. 自动管理：浏览器会自动处理 Cookie 的发送和存储。

缺点：

1. 存储容量小：通常限制在 4KB 左右。
2. 请求开销：每次请求都会携带所有匹配的 Cookie,会增加请求大小。
3. 安全风险：
   • XSS (跨站脚本攻击)：Cookie 没有设置 HttpOnly，恶意脚本可以窃取用户的敏感信息（如 Session ID）。
   • CSRF (跨站请求伪造)：攻击者诱骗用户在已登录的网站上执行一个恶意请求，浏览器会自动带上用户的 Cookie,从而冒充用户身份。
4. API 复杂：document.cookie 的 API 设计得比较原始,使用起来不太方便。

安全最佳实践：

• 对于敏感信息（如登录凭证），永远不要将它们存储在 Cookie 中，或者至少使用 HttpOnly 标志，并通过 HTTPS 传输。
• 对于 Session ID，务必设置 HttpOnly 和 Secure，并考虑使用 SameSite 属性。
• 尽量减少 Cookie 的数量和大小。

Cookie vs. LocalStorage / SessionStorage

在现代 Web 开发中，很多时候会选择使用 Web Storage API (localStorage 和 sessionStorage) 来替代部分 Cookie 的功能。

如何选择？

• 需要服务器端读取数据？ -> 必须用 Cookie。
• 只需要客户端存储，且数据量较大或需要长期保存？ -> 用 localStorage。
• 只需要客户端临时存储，关闭页面就丢？ -> 用 sessionStorage。

Cookie 是 Web 技术中一个历史悠久且至今仍然不可或缺的基础组件，它使得服务器能够识别和记住用户，是实现交互式 Web 应用的基石。

作为开发者，你需要理解它的原理、掌握它的用法，更重要的是，要时刻关注它的安全性，在合适的场景下使用它，并了解何时使用更现代的 localStorage 和 sessionStorage 来替代它。