BOM Cookie操作详解

Cookie是浏览器存储数据的一种机制，主要用于存储会话信息、用户偏好设置等。下面我将详细讲解Cookie的操作方法，并提供可视化示例。

核心API与用法

1. 读取所有Cookie

// 获取当前页面所有Cookie（字符串形式）
const allCookies = document.cookie;
console.log(allCookies); 
// 输出: "name=value; name2=value2; ..."

2. 设置Cookie

// 设置一个简单的Cookie
document.cookie = "username=JohnDoe";

// 设置带过期时间的Cookie（UTC时间）
document.cookie = "token=abc123; expires=Fri, 31 Dec 2025 23:59:59 GMT";

// 设置带路径的Cookie
document.cookie = "preference=dark; path=/settings";

// 设置带域名和Secure标志的Cookie
document.cookie = "sessionId=xyz789; domain=example.com; Secure";

3. 读取特定Cookie

function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.trim().split('=');
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

console.log(getCookie("username")); // 输出: "JohnDoe"

4. 更新Cookie

// 更新Cookie的值（需要相同名称、路径和域名）
document.cookie = "username=JaneDoe";

5. 删除Cookie

// 通过设置过期时间为过去来删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

关键概念说明

1. Cookie的作用域

• Domain: 指定哪些主机可以访问Cookie（默认为当前主机）

• Path: 指定URL路径前缀（默认为当前路径）

• SameSite: 控制跨站请求时Cookie的发送（Strict/Lax/None）

2. 安全属性

• Secure: 只能通过HTTPS协议传输

• HttpOnly: 防止XSS攻击（JavaScript无法访问）

• SameSite: 防止CSRF攻击

3. 存储限制

• 每个域名下的Cookie数量有限（通常50个左右）

• 每个Cookie大小有限（通常4KB左右）

• 超出限制时浏览器可能删除旧Cookie或拒绝新Cookie

4. Cookie vs localStorage

特性	Cookie	localStorage
存储大小	4KB	5-10MB
过期时间	可设置	永久
自动发送	每次请求自动发送	不自动发送
访问方式	前端JS和后端均可访问	仅前端JS访问
适用场景	会话管理、用户认证	长期存储本地数据

5. 使用场景

1. 用户身份认证（Session管理）

2. 个性化设置（主题、语言等）

3. 跟踪用户行为（分析、广告等）

4. 保存表单数据（防止意外关闭）

6. 注意事项

• 避免存储敏感信息（如密码）

• 设置合理的过期时间

• 使用HttpOnly和Secure标志增强安全性

• 考虑使用更现代的存储方案（如localStorage）存储非敏感数据