前端Cookie操作指南：从基础到实践

1. 初识前端Cookie操作

作为一名前端开发者，我经常需要处理用户状态管理的问题。记得刚入行时，第一次接触Cookie这个概念是在实现"记住登录状态"功能的时候。当时完全不明白为什么设置了一个小小的字符串，用户关闭浏览器再打开还能保持登录状态。后来才知道，这就是Cookie的魔力所在。

Cookie本质上是一小段文本信息，由服务器发送到浏览器并保存在本地。当浏览器再次向同一服务器发起请求时，会自动携带这些Cookie信息。这种机制使得无状态的HTTP协议能够"记住"用户状态，这是现代Web应用的基础功能之一。

在前端JavaScript中，我们主要通过document.cookie这个API来操作Cookie。它看起来简单，但实际上有很多需要注意的细节。比如：

• 每个域名下的Cookie有大小限制（通常4KB左右）
• 数量也有限制（一般每个域名20-50个）
• 有各种安全属性需要设置

重要提示：现代浏览器逐渐限制第三方Cookie的使用，这是出于隐私保护的考虑。作为开发者，我们需要了解这些变化对应用的影响。

2. Cookie的基本读写操作

2.1 读取Cookie

读取Cookie非常简单，直接访问document.cookie即可：

javascript复制const allCookies = document.cookie;
console.log(allCookies);
// 输出类似："name=John; favorite_color=blue; last_visit=2023-01-01"

但要注意，这样获取的是当前域名下所有Cookie组成的字符串，多个Cookie之间用分号和空格分隔。实际开发中，我们通常需要解析这个字符串来获取特定Cookie的值：

javascript复制function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

这个实用函数通过字符串操作来提取特定名