在 Web 开发中，Cookie 是一种在用户的浏览器中存储少量数据的机制。Cookie 数据通常用于存储用户的偏好设置、登录信息、会话状态等。JavaScript 提供了操作 Cookie 的能力，可以设置、读取和删除 Cookie。

1. Cookie 的基本概念

Cookie 是由服务器发送给浏览器，并且在浏览器与服务器之间的后续请求中自动附加的少量数据。每个 Cookie 都包含以下几部分信息：

• 名称：Cookie 的名称。
• 值：Cookie 的值。
• 过期时间：Cookie 的有效期，过期后将被删除。
• 路径：定义该 Cookie 可访问的路径。
• 域：定义该 Cookie 可访问的域。
• 安全标志：如果设置了此标志，则 Cookie 只能通过 HTTPS 协议进行访问。

2. 设置 Cookie

在 JavaScript 中，使用 document.cookie 来设置 Cookie。设置时，Cookie 的格式为 "name=value"，可以附加其他属性，例如 expires（过期时间）、path（路径）等。

基本语法：

document.cookie = "name=value";

示例：

document.cookie = "username=JohnDoe";

这将设置一个名为 username 的 Cookie，值为 JohnDoe。

3. 设置带有过期时间的 Cookie

Cookie 默认的过期时间是当前会话结束时（浏览器关闭时）。如果希望 Cookie 在一定时间后过期，可以设置 expires 属性。

语法：

document.cookie = "name=value; expires=expiration_date";

expires 属性的值是一个 UTC 格式的日期字符串。可以使用 JavaScript 动态生成过期日期。

示例：

let expirationDate = new Date();
expirationDate.setMinutes(expirationDate.getMinutes() + 10);  // 设置10分钟后过期
document.cookie = "username=JohnDoe; expires=" + expirationDate.toUTCString();

该 Cookie 会在 10 分钟后过期。

4. 设置 Cookie 的路径和域

通过 path 和 domain 属性，可以控制 Cookie 的作用范围。

• path：指定 Cookie 可用的路径。默认值是当前页面的路径。
• domain：指定 Cookie 可用的域名。可以使 Cookie 在多个子域之间共享。

示例：

document.cookie = "username=JohnDoe; path=/; domain=example.com";

这个 Cookie 可以在 example.com 域名下的所有页面中使用。

5. 设置安全 Cookie

如果网站使用 HTTPS 协议，你可以通过设置 Secure 标志，确保 Cookie 仅通过 HTTPS 传输。

示例：

document.cookie = "username=JohnDoe; secure";

该 Cookie 仅在 HTTPS 连接时传输。

6. 读取 Cookie

可以通过 document.cookie 来读取浏览器中的所有 Cookie。返回的字符串是所有 Cookie 的集合，格式为 name=value 的对多个 Cookie 用分号和空格分隔。

语法：

let cookies = document.cookie;
console.log(cookies);

示例：

let cookies = document.cookie;
console.log(cookies);  // 输出：username=JohnDoe; session_id=123456

如果需要读取单个 Cookie 的值，可以通过解析 document.cookie 来实现。

读取单个 Cookie 示例：

function getCookie(name) {
  let cookieArr = document.cookie.split("; ");
  for (let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split("=");
    if (cookiePair[0] === name) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

let username = getCookie("username");
console.log(username);  // 输出：JohnDoe

7. 删除 Cookie

要删除 Cookie，可以设置其过期时间为过去的日期，或者直接通过 expires 设置为已经过期的时间。

示例：

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

这会删除 username Cookie。设置过期时间为 1970 年 1 月 1 日是一个常见的删除 Cookie 的技巧。

8. Cookie 示例应用

1. 设置用户的登录状态

function setLoginStatus(username) {
  let expirationDate = new Date();
  expirationDate.setMinutes(expirationDate.getMinutes() + 30);  // 设置30分钟后过期
  document.cookie = "username=" + username + "; expires=" + expirationDate.toUTCString() + "; path=/";
}

setLoginStatus("JohnDoe");  // 设置用户登录状态

2. 读取并显示用户的名字

function displayUsername() {
  let username = getCookie("username");
  if (username) {
    alert("Welcome back, " + username);
  } else {
    alert("Welcome, new user!");
  }
}

displayUsername();  // 显示欢迎消息

3. 自动登录功能

function autoLogin() {
  let username = getCookie("username");
  if (username) {
    alert("Welcome back, " + username);
    // 自动登录逻辑...
  } else {
    alert("Please log in.");
  }
}

autoLogin();  // 执行自动登录逻辑

9. Cookie 的限制

• 大小限制：每个 Cookie 的大小通常不能超过 4KB。
• 数量限制：浏览器对于每个域名的 Cookie 数量有限制，通常为 20 个左右。
• 安全性：Cookie 数据不加密存储，敏感信息（如密码）不应存储在 Cookie 中。使用 Secure 和 HttpOnly 属性增加安全性。

10. 总结

• document.cookie 用于设置、读取和删除 Cookie。
• Cookie 可以存储用户信息、会话状态、偏好设置等。
• 可以通过设置 expires 属性来控制 Cookie 的过期时间，使用 path 和 domain 来设置 Cookie 的作用范围。
• 为了增强安全性，可以使用 Secure 和 HttpOnly 标志。

更多详细内容请关注其他相关文章。