1. 通过 document.cookie 直接解析获取
1.1 原理与数据结构
在前端开发中，document.cookie 是最常用的读取入口之一。它返回一个由 k=v 对组成的字符串，多个键值对之间以分号和空格分隔，形如 name=张三; token=abc123。由于返回值是一个整体字符串，真正需要的值需要经过解析才能提取出具体的键。
理解这一步的关键在于掌握分割与去空格的步骤：先按分号分割，再去除前后空格，最后对 key 做解码并与目标名称进行比对。只有匹配成功，才会返回对应的 value。
1.2 代码实现示例
// 通过 document.cookie 逐个解析，获取指定名称的值
function getCookieByName(name) {const cookies = document.cookie ? document.cookie.split(';') : [];for (let i = 0; i < cookies.length; i++) {const cookie = cookies[i].trim();const eqIndex = cookie.indexOf('=');const key = decodeURIComponent(cookie.substring(0, eqIndex));if (key === name) {return decodeURIComponent(cookie.substring(eqIndex + 1));}}return '';
}// 使用示例
const token = getCookieByName('token'); // 获取到的值可能是空或者实际的 token 字符串
console.log(token);
在实际使用中，解析逻辑要处理编码，因为 cookie 名称和值通常经过 URL 编码。若页面包含多个域名或路径限定的 Cookie，解析时也需注意范围筛选。
1.3 注意事项
需要明确的是，HttpOnly 的 Cookie 无法通过前端的脚本读取，因此即使存在该键，也只能看到空值或无法访问。此特性对安全性至关重要，常用于会话标识、鉴权令牌等。
2. 使用正则表达式快速定位目标 Cookie
2.1 正则匹配的要点
除了逐个分割之外，可以借助正则表达式在一个表达式中直接定位目标键值对。正则的优点是简洁、一次性筛选，但缺点是对边界字符和编码敏感，且在遇到特殊字符时需要额外转义。
一个常见的思路是构建一个模式：(?:^|; )name=([^;]*)，其中 name 是需要读取的键。使用此方式可以在一个段落中快速提取值。
2.2 实践代码示例
// 使用正则表达式快速获取指定 Cookie 的值
function getCookieRegex(name) {const match = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.*+?^${}()|[\\]\\\\])/g, '\\\\$1') + '=([^;]*)'));return match ? decodeURIComponent(match[1]) : '';
}// 使用示例
const session = getCookieRegex('session_id');
console.log('session_id:', session);
在兼容性与健壮性方面，正则方法通常更简洁，但对于复杂的 Cookie 字符和编码情况，前者的逐条解析可能更稳妥。
2.3 场景对比
快速读取少量键且值中包含特殊字符时，正则方法可以减少代码量；对于需要逐条处理多值的场景，分割式解析更直观，便于后续遍历和筛选。
3. 将获取 Cookie 的逻辑封装成工具函数
3.1 常用封装思路
为了在不同页面或组件中复用获取 Cookie 的逻辑，可以将其包装成一个小型工具库。工具函数应支持指定名称、默认值和解码选项，并兼顾兼容性与可读性。
封装的核心在于把重复的解析逻辑抽象出去，提升代码的可维护性。返回类型可以是字符串，也可以按需解析为 JSON 对象，以适应不同数据存储形式。
3.2 JSON 值存取与错误处理
// 一种常见的封装实现：读取 JSON 字符串并解析
function getCookieJson(name, defaultValue = null) {const value = getCookieByName(name);if (!value) return defaultValue;try {return JSON.parse(value);} catch (e) {return defaultValue;}
}// 使用示例
const user = getCookieJson('userProfile', null);
console.log(user);
在该示例中，结果若不是合法的 JSON 将返回默认值，从而避免运行时错误对页面造成影响。
4. 使用 CookieStore API（实验性，异步获取）
4.1 基本用法
作为浏览器新兴的 Cookie 访问方案，CookieStore API 提供了异步取值能力，与传统的 document.cookie 不同。实现方式通常是通过 cookieStore.get({name: 'token'}) 获取一个异步对象，再取出 cookie 的 value。这在某些沙盒环境或渐进增强场景中更加友好。
遇到需要处理异步流程的场景时，使用该 API 可以避免阻塞 UI 渲染，且对大型页面的状态管理有潜在好处。
4.2 兼容性与注意事项
当前 CookieStore API 的实现程度在各浏览器之间并不一致，存在 兼容性风险。在实际投产前需要进行能力检测，并在降级路径中回退到 document.cookie 的解析方式。
// 示例：异步获取名为 token 的 Cookie 值
if ('cookieStore' in window) {cookieStore.get({ name: 'token' }).then(cookie => {console.log('token:', cookie ? cookie.value : null);});
}
5. HttpOnly 与服务端协同在不同场景下的取值策略
5.1 HttpOnly 说明及其对前端的影响
如果一个 Cookie 被标记为 HttpOnly，浏览器脚本将不能读取它的值。这一特性用于防止跨站脚本攻击（XSS）窃取会话令牌，因此在前端直接获取的能力受到限制。在这类场景中，前端需要与服务端协同工作，通过服务端响应或页面结构来间接利用该信息。
在实现上，HttpOnly 的 Cookie 仍然会随请求自动携带，浏览器会在同源策略下自动发送，但不会暴露给前端脚本读取。
5.2 服务端读取与前端协作场景
对于需要保护的会话标识，通常将它放在 HttpOnly 的 Cookie 中，由服务器在每次请求中验证。前端可以通过以下方式实现协作：在请求中携带凭证，并依赖服务器端返回的状态或令牌来驱动界面渲染，而不是直接读取 Cookie 值。
在这个场景下，前端的职责更多聚焦于请求发起与响应处理，避免直接依赖不可读的 Cookie 值进行逻辑判断，以提升安全性和健壮性。
