JavaScript 无内置 Cookie API,需手动操作 document.cookie 字符串,必须正确编码值、设置 path=/、Secure、expires 等属性,读取需正则解析,删除须完全匹配原 path/domain 并设过期时间。

JavaScript 本身没有内置的 Cookie 类或高级 API,所有操作都依赖原生的 document.cookie 字符串读写,这意味着你得自己解析、编码、设置过期时间、作用域等——稍不注意就会漏掉 path、domain 或 Secure 标志,导致 Cookie 写不进、读不到、或被浏览器拒绝。
如何安全地设置一个带属性的 Cookie
直接拼接字符串极易出错,比如忘记 encodeURIComponent() 导致特殊字符(如空格、分号)截断值,或漏写 path=/ 导致子路径下无法读取。
- 必须对
value使用encodeURIComponent(),否则=、;、空格等会破坏格式 -
path=/是最常用且推荐的默认值,否则默认为当前路径(比如/user/profile下设的 Cookie 在/下就读不到) - 如果站点启用了 HTTPS,务必加上
Secure;若需跨子域共享(如a.example.com和b.example.com),才加Domain=.example.com - 有效期用
expires(UTC 时间字符串)比max-age兼容性更好(IE 不支持max-age)
function setCookie(name, value, days = 7) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = date.toUTCString();
document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires}; path=/; Secure; SameSite=Lax`;
}为什么 document.cookie 读出来是字符串而不是对象
因为 document.cookie 是一个“getter/setter”伪属性:读取时返回一个分号分隔的键值对字符串(如 "a=1; b=2; c=hello%20world"),不自动解析,也不暴露原始属性(expires、HttpOnly 等均不可见)。
-
HttpOnlyCookie 完全不可读——JS 访问document.cookie时会被静默过滤掉,这是安全机制,不是 bug - 多个同名 Cookie(不同
path或domain)会同时出现在字符串中,但浏览器只返回**当前路径匹配且未过期**的那一条(按写入顺序?实际由浏览器决定,不可依赖) - 不能通过
document.cookie = "a="删除 Cookie,必须设expires为过去时间
如何可靠地读取指定 Cookie 的值
手动解析 document.cookie 字符串是最轻量、无依赖的做法,但要注意边界匹配(避免 name= 匹配到 namename=)和解码。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
立即学习“Java免费学习笔记(深入)”;
function getCookie(name) {
const match = document.cookie.match(new RegExp(`(^|;)\\s*${encodeURIComponent(name)}=([^;]*)`));
return match ? decodeURIComponent(match[2]) : null;
}- 正则中
(^|;)确保匹配键的开头(行首或分号后),\\s*吃掉可能的空格 - 即使服务端写了
SameSite=None; Secure,JS 仍能读——只要没标HttpOnly - 不要用
split(';')+indexOf,遇到值含分号(虽少见但合法)就崩
删除 Cookie 的正确姿势是什么
没有 deleteCookie() 方法。删除 = 覆盖写入一个已过期的同名 Cookie,且 path 和 domain 必须与原 Cookie 完全一致,否则旧 Cookie 仍残留。
- 只设
expires不够,必须带上和当初设置时一模一样的path(常见坑:当初没写path,默认是当前路径,删时却写了path=/→ 删不掉) - 如果原 Cookie 有
Domain=.example.com,删除时也必须带上,否则只清除了当前主机名下的副本 - 可以省略
value,但最好设为空字符串,更明确
function deleteCookie(name, path = '/', domain = '') {
document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}${domain ? '; domain=' + domain : ''}`;
}真正麻烦的从来不是语法,而是每个属性都得对齐、每个字符都要编码、每次读写都得防注入——这也是为什么现代项目基本用 localStorage 或服务端 session + JWT 替代 Cookie 做前端状态管理。如果非用 Cookie,建议封装成小函数并统一管理 path 和 Secure 策略,别在业务代码里零散拼字符串。










