JavaScript通过document.cookie读写Cookie,需按格式设置键值对及属性;常用属性包括expires、max-age、path、domain、Secure、HttpOnly和SameSite;读取时返回所有Cookie字符串,需解析获取指定值;删除需将expires设为过去时间;建议封装读取、写入、删除函数以提升易用性;生产环境应使用Secure、HttpOnly和SameSite增强安全性;敏感信息应避免明文存储;现代项目推荐localStorage或JWT替代Cookie管理。

JavaScript 可以通过内置的 document.cookie API 来读取、写入和删除 Cookie。虽然这个 API 功能有限且使用起来不够直观,但结合一些封装方法可以高效地管理 Cookie,并通过设置安全属性提升应用安全性。
写入 Cookie 的基本方法
通过给 document.cookie 赋值字符串来添加或更新 Cookie。格式为 key=value,多个属性用分号分隔。
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2027 23:59:59 GMT; path=/; Secure; HttpOnly";常用参数说明:
- expires:设置过期时间,GMT 格式。不设置则为会话 Cookie,浏览器关闭即失效
- max-age:以秒为单位设置有效期(现代浏览器推荐使用)
- path:指定可访问 Cookie 的路径,默认为当前路径
- domain:指定可访问的域名,如 .example.com 可用于子域名共享
- Secure:仅在 HTTPS 连接下发送 Cookie
- HttpOnly:防止 JavaScript 访问,降低 XSS 攻击风险
- SameSite:可设为 Strict、Lax 或 None,用于防范 CSRF 攻击
示例:设置一个保留 7 天的用户偏好 Cookie
立即学习“Java免费学习笔记(深入)”;
const date = new Date();date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = `theme=dark; expires=${date.toUTCString()}; path=/`;
读取 Cookie 的方法
document.cookie 在读取时返回所有可用 Cookie 的字符串,格式为 key1=value1; key2=value2,需自行解析。
封装一个根据名称获取 Cookie 值的函数:
const cookies = document.cookie.split('; ');
for (let cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) return decodeURIComponent(value);
}
return null;
}
调用方式:getCookie('username') 返回对应值或 null。
删除 Cookie 的正确方式
JavaScript 无法直接“删除” Cookie,只能通过设置过期时间为过去来让浏览器自动清除。
删除指定 Cookie 的函数示例:
function deleteCookie(name, path = '/') {document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
}
注意:删除时 path 和 domain 必须与设置时一致,否则无法成功清除。
安全设置建议
在生产环境中操作 Cookie 应遵循以下安全实践:
- 敏感信息避免明文存储在 Cookie 中,建议只存 Token 或 ID
- 始终为 Cookie 添加 Secure 属性,确保仅通过 HTTPS 传输
- 对身份认证类 Cookie 设置 HttpOnly,阻止脚本访问
- 合理配置 SameSite=Strict 或 Lax,防止跨站请求伪造
- 设置合理的 max-age 或 expires 时间,避免长期留存
基本上就这些。JavaScript 操作 Cookie 虽然原始,但配合良好封装和安全策略,仍可在小型状态管理或兼容老系统时发挥实用价值。现代项目更推荐使用 localStorage 或后端 Session 配合 JWT 方案替代传统 Cookie 管理。










