JavaScript基础教程（八十五）浏览器BOM之Cookie：甜美的负担，深入解析JavaScript Cookie与实战示例

在Web开发的甜蜜世界里，Cookie曾是维持用户状态的唯一选择。这些小巧的数据片段由服务器发送并存储在用户浏览器中，随着每个HTTP请求悄然往返，承担着身份认证、个性化设置等关键任务。

▍Cookie工作原理揭秘

Cookie本质上是键值对文本数据，通过document.cookie API进行操作。每个Cookie可设置多种属性：

// 设置Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/; Secure";

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

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

▍Cookie的局限性挑战

• 容量限制：每个域名约4KB存储空间
• 性能开销：每个HTTP请求都会携带Cookie数据
• 安全性风险：易受XSS和CSRF攻击

▍实战示例：用户偏好设置

// 封装Cookie操作函数
const cookieUtil = {
  set(name, value, days = 30) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/`;
  },
  
  get(name) {
    const cookies = document.cookie.split(';');
    for(let cookie of cookies) {
      const [key, value] = cookie.trim().split('=');
      if(key === name) return decodeURIComponent(value);
    }
    return null;
  },
  
  remove(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
  }
};

// 使用示例
cookieUtil.set('theme', 'dark'); // 设置主题偏好
console.log(cookieUtil.get('theme')); // 输出: dark

▍新时代的替代方案

随着Web Storage API（localStorage/sessionStorage）和IndexedDB的出现，Cookie逐渐让出了主导地位。但在认证场景中，HttpOnly Cookie仍是保护敏感信息的首选方案。

尽管Cookie技术已显老态，它仍是Web开发知识体系中的重要组成部分。理解其原理与局限，方能更好地运用现代存储方案，构建安全高效的Web应用。