JavaScript操作Cookie通过document.cookie实现,读取返回分号分隔字符串,写入需按name=value; expires=...格式赋值,删除需覆盖并设过期时间,且path/domain必须匹配原设置。

JavaScript 操作 Cookie 主要是通过 document.cookie 这个属性来完成的,它看起来像一个变量,但实际是**读写接口**:读取时返回当前域名下所有可用 Cookie 的字符串(用分号分隔),写入时则需按特定格式赋值才能设置或更新。
如何写入(设置)Cookie
设置 Cookie 就是给 document.cookie 赋值一个符合格式的字符串。基本结构为:
name=value; expires=GMTString; path=/; domain=.example.com; secure; HttpOnly(JS不可读)
其中只有 name=value 是必需的,其它都是可选属性。常用操作示例:
立即学习“Java免费学习笔记(深入)”;
- 简单设置:
document.cookie = "username=john";(会话级 Cookie,关闭浏览器即失效) - 带过期时间(7天后):
document.cookie = "token=abc123; expires=" + new Date(Date.now() + 7*24*60*60*1000).toUTCString(); - 指定路径和域名(让子路径也能访问):
document.cookie = "theme=dark; path=/; domain=.site.com"; - 安全标记(仅 HTTPS 传输):
document.cookie = "sessionid=xyz; secure; SameSite=Strict";
如何读取 Cookie
document.cookie 读取返回的是一个类似 "a=1; b=2; c=3" 的字符串,没有内置解析方法,需要手动处理:
- 用
split('; ')拆成键值对数组 - 再对每个项用
split('=')分离 key 和 value - 注意空格和 URL 编码(中文或特殊字符需用
encodeURIComponent/decodeURIComponent)
常用封装函数示例:
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (let cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) return decodeURIComponent(value);
}
return null;
}
如何删除 Cookie
Cookie 本身不能直接“删除”,只能通过覆盖的方式让它立即过期:
- 把
expires设为过去的时间(如 1970 年) - 必须保证
path和domain与当初设置时完全一致,否则删不掉 - 推荐写法:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
注意事项和替代方案
原生 Cookie 操作繁琐、易出错,且有大小限制(单个约 4KB,总数量也有限)。现代项目中建议:
- 优先使用
localStorage或sessionStorage存储非敏感前端数据 - 涉及登录态、权限等关键信息,仍应由后端设 Cookie(含
HttpOnly和Secure),前端只负责触发登录/登出逻辑 - 若必须 JS 操作 Cookie,可引入轻量库如 js-cookie 简化流程
基本上就这些。不复杂但容易忽略 path/domain 匹配和编码问题,写的时候多检查两遍就行。











