JavaScript篇：Cookie 小饼干🍪：前端存储的‘老古董’，你用对了吗？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，做了6年前端。今天要聊一个既熟悉又陌生的东西------Cookie。别看现在 localStorage 和 sessionStorage 风头正盛，但有些场景下，Cookie 依然是无可替代的"老古董"。刚入行时，我也觉得 Cookie 很简单，直到有一次用户登录状态莫名其妙丢失，我才真正搞懂它...

---

一、Cookie 是什么？先来个吃货比喻

想象 Cookie 就像服务员给你的一块小饼干（没错，名字就是这么来的！）：

• 你点餐（发送请求） ：服务员（服务器）在餐盘（响应头）放块饼干Set-Cookie: user_id=123

• 下次再来（新请求） ：你会自动带上这块饼干Cookie: user_id=123

• 服务员认出你：哦！是上次的123号客人！

// 经典登录场景
document.cookie = "user_id=123; path=/; expires=Fri, 31 Dec 2025 23:59:59 GMT";
// 注意：一次只能设置一个键值对！

---

二、我踩过的三大 Cookie 坑

坑1：域名和路径对不上

// 在 https://example.com/admin 设置：
document.cookie = "token=abc; path=/admin";

// 结果在 https://example.com 下读取不到！
// 解决方案：path=/ 或明确同级路径

坑2：过期时间格式翻车

// 新手错误写法（本地时间）：
document.cookie = "temp=1; expires=Sat Aug 20 2024 12:00:00";

// 正确写法（必须GMT时间）：
document.cookie = "temp=1; expires=Sat, 20 Aug 2024 12:00:00 GMT";

坑3：没设置 Secure 和 HttpOnly

// 不安全写法（容易被XSS攻击）：
document.cookie = "session=xxx";

// 安全姿势：
document.cookie = "session=xxx; Secure; HttpOnly"; 
// （注意：HttpOnly 的Cookie无法用JS读取！）

---

三、Cookie 的现代封装方案

1. 封装读写函数（避免裸操作）

const cookie = {
  set(name, value, days = 7) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
  },
  get(name) {
    return document.cookie
      .split('; ')
      .find(row => row.startsWith(`${name}=`))
      ?.split('=')[1];
  }
};

// 使用示例
cookie.set('remember_me', 'true', 30);
cookie.get('remember_me'); // "true"

2. 第三方库推荐

• js-cookie：API 更友好

  Cookies.set('theme', 'dark', { expires: 7, secure: true });
  Cookies.get('theme'); // "dark"

---

四、Cookie 的替代方案（新时代PK）

特性	Cookie	localStorage	sessionStorage
容量	4KB左右	5MB+	5MB+
生命周期	可设置过期时间	永久	标签页关闭失效
自动携带	每次请求自动带	不带	不带
服务端可读	✅	❌	❌

什么时候必须用Cookie？

• 需要服务端读取的场景（如Session ID）
• 跨子域共享数据（设置domain=.example.com）
• 老项目兼容性要求

---

五、真实案例：七天免登录实现

// 登录成功后
function setAutoLoginToken(userId) {
  const token = generateToken(userId); // 生成加密token
  document.cookie = `auto_login=${token}; path=/; max-age=${7 * 24 * 60 * 60}`;
}

// 页面加载时检查
function checkAutoLogin() {
  const token = cookie.get('auto_login');
  if (token) {
    const userId = verifyToken(token); // 验证token有效性
    if (userId) silentLogin(userId); // 静默登录
  }
}

---

六、总结：Cookie 食用指南

1. 安全第一 ：敏感信息务必加Secure; HttpOnly
2. 路径陷阱 ：主域名用path=/，子路径按需设置
3. 容量警惕：单个域名下所有Cookie加起来别超4KB
4. 过期时间 ：用max-age（秒）比expires（GMT时间）更简单

最后提醒：现在很多项目用 localStorage + JWT 方案了，但如果你维护老系统或需要SSR，Cookie 依然是必备技能。你还遇到过哪些 Cookie 的奇葩问题？评论区聊聊！