直接用"; "分割document.cookie字符串可实现轻量可靠解析:先split("; "),再trim并indexOf("="提取key/value,decodeURIComponent解码;get时需substring(0,eqIndex)===name严格匹配防误判。
直接利用 document.cookie 返回字符串中“; ”(分号+空格)这一明确分隔规则,就能写出轻量、可靠、无依赖的 cookie 解析器。关键不是追求复杂,而是紧扣规范、避开陷阱。
理解分隔符的真实含义和边界情况
浏览器在 document.cookie 中返回的 cookie 列表,**严格使用 "; "(分号后紧跟一个空格)分隔各键值对**。这不是可选风格,而是 DOM API 的确定行为。例如:
"theme=dark; user_id=12345; session=abc%3Bdef"
注意三点:
- 每个键值对开头**没有前导空格**,但结尾分号后**一定跟一个空格**(除非是最后一个);
- value 中若含原始分号或空格,早已被 URL 编码(如
%3B、%20),不会干扰分割逻辑; - 不能用
.split(";")粗暴切分——那会把"session=abc%3Bdef"错切成两段。
高效解析:一步 split + 逐项 trim 匹配
最简且高性能的做法是:
- 用
.split("; ")直接切分(注意空格不能省); - 遍历结果数组,对每项用
.trim()去首尾空格(兼容个别异常场景); - 再用
.indexOf("=")找第一个等号位置,安全提取 key 和 value; - 对 value 调用
decodeURIComponent()(比unescape更标准,支持 Unicode)。
无需正则、不建 Map、不预处理整个字符串——平均 O(n) 时间,内存开销极低。
精准匹配 key:避免子串误判
不能只用 str.includes(name + "="),否则 user_id=123 会被 user 键错误命中。正确方式是:
- 取每项的 key 部分:从开头到第一个
=前的子串; - 用
===严格比对(区分大小写,符合 Cookie 规范); - 推荐写法:
item.substring(0, eqIndex) === name,其中eqIndex = item.indexOf("=")。
封装建议:只暴露 get / set / remove 三个核心方法
一个实用的轻量封装示例:
get(name):返回解码后的值,未找到返回 undefined;
set(name, value, options?):支持 expires、path、domain、secure、sameSite;
remove(name, options?):设 expires 为过去时间,并复用相同 path/domain 以确保清除成功。
options 默认补全为 { path: "/" },避免因路径不一致导致设而不见、删而不净。











