《前端老手不常提的JS Cookie实操指南：存、取、删与避坑全记录》

登录态保持、主题偏好记忆、购物车临时数据，不少中后台系统依然依赖Cookie撑场面。别被localStorage的声势掩盖，摸清它的脾气，反而能让鉴权链路更稳。今天不堆砌文档定义，直接拆解真实开发里的读写姿势与常见断点，帮你把这块基础能力攥在手心。

往浏览器里塞数据，入口就一行。document.cookie = "key=value"。但只写这一句，Cookie就像没绑定时限的种子，会话结束就随风散。真正决定它寿命与作用范围的是附加参数串：expires（过期节点）、path（生效路由）、domain（作用域名）。想把用户标识全站可用且留存两周，标准拼法如下： document.cookie = "uid=abc123; expires=" + new Date(Date.now() + 14*24*60*60*1000).toUTCString() + "; path=/; secure; samesite=lax" 这里埋着几个实操细节：时间必须转成UTC格式字符串，否则浏览器解析会直接报错；secure强制仅HTTPS传输，涉及令牌或敏感信息务必开启；samesite控制跨站携带策略，目前主流浏览器默认lax已能拦截多数恶意请求。参数间严格用分号+空格分隔，少一个符号都会导致整条失效。

读操作则没那么直观。浏览器把同域名的Cookie拍扁成一条分号拼接的长文本，原生API不返回对象，需要自行切割提取。核心动作是定位目标键名，截取等号右侧片段并还原编码。 稳定版读取逻辑可以直接复用：

function getCookie(name) {
  const val = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  return val ? decodeURIComponent(val[2]) : undefined;
}

正则头部预留了(^| )防止中间字符误伤，decodeURIComponent负责把%xx格式的占位符还原成可读文本。调用后务必判空，首屏脚本执行时Cookie可能尚未同步完成，配合重试或默认 fallback 能避免白屏风险。

删除环节是新手的重灾区。很多人直接赋值document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT"，却发现本地依然躺着一个旧值。根因在于浏览器校验同源规则时会比对三要素：名称、路径、域。写入时指定了/admin，清除时却用默认的当前页路径，两边对不上号，浏览器只会当成新任务追加。想干净注销，必须带上当年的“地址证”：document.cookie = "uid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/admin; domain=.example.com"。路径与域完全复刻写入端，过期时间提前即可秒级清理。

真实项目里还要避开两个隐形雷区。一是字符集瓶颈，Cookie原始协议不支持非ASCII字符，含中文或特殊符号的Payload必须先做encodeURIComponent打包，取出时逆向还原；二是容量红线，单Cookie上限约4KB，硬塞大段JSON或Base64图片会被浏览器静默截断。遇到跨页面状态共享优先选Session Storage，需服务端参与校验或承载票据再交予Cookie。现代工程化组件库已接管复杂状态流，Cookie退守为轻量级持久化后备方案，理解它的适用边界，比盲目炫技更重要。

把底层机制吃透，排查鉴权失败或Token丢失时就能快速定位是参数拼接错位、路径遗漏，还是跨域拦截惹的祸。日常维护养成惯性：写入带齐属性，读取做好容错，删除严格对齐。底座稳固后，哪怕后续切到Vue Router守卫或React Hooks管理上下文，这套处理思路也能无缝迁移。