010.Cookie 解析

出处：掘金

原作者：前端微白

---

在 Web 开发中，经常需要处理浏览器 cookies。本文将详细介绍如何使用 JS 编写一个高效的 cookie 解析函数，将 cookie 字符串转换为方便使用的 JS 对象

理解 Cookie 字符串格式

在实现解析器之前，需要了解 cookie 字符串的标准格式：

"name=value; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/; domain=example.com; secure; HttpOnly"

• 每个 cookie 键值对用分号分隔
• 第一个键值对通常是主数据（如 name=value）
• 后面的属性是可选参数（如 expires, path, domain 等）
• 键值对等号左右可能包含空格

解析器实现

function parseCookies(cookieString) {
  // 如果输入为空，返回空对象
  if (!cookieString || cookieString.trim() === '') {
    return {};
  }
  
  const cookies = {};
  
  // 用分号分割字符串
  const items = cookieString.split(';');
  
  items.forEach(item => {
    // 按第一个等号分割键值对
    const [key, ...values] = item.split('=');
    
    // 如果没有值，跳过此项
    if (values.length === 0) return;
    
    // 合并值部分（可能包含等号）
    const value = values.join('=');
    
    // 清理字符串两端空格
    const cleanedKey = key.trim();
    const trimmedValue = value.trim();
    
    // 尝试解码 URL 编码的值
    let cleanedValue;
    try {
      cleanedValue = decodeURIComponent(trimmedValue);
    } catch (e) {
      // 解码失败，使用原始值
      cleanedValue = trimmedValue;
    }
    
    // 将有效的键值对添加到结果对象
    if (cleanedKey && cleanedValue !== undefined) {
      cookies[cleanedKey] = cleanedValue;
    }
  });
  
  return cookies;
}

关键设计考虑

1. URL 解码：使用 decodeURIComponent() 处理 URL 编码的值
2. 错误处理：在解码失败时回退到原始值
3. 空格处理：删除键值前后的空白字符
4. 等号支持：正确处理值中的等号字符
5. 空值处理：跳过无效数据条目
6. 性能优化：简洁高效的遍历算法

应用场景

• 浏览器端处理 document.cookie
• 服务器端处理 HTTP 请求中的 Cookie 头
• 调试和分析应用中的 Cookie 数据
• 在无法使用 document.cookie API 时手动处理 Cookies