JavaScript通过document.cookie操作Cookie,需手动拼接字符串设置、解析字符串读取、用过期时间覆盖删除;须注意path/domain一致性和编码处理。

JavaScript 操作 Cookie 主要通过 document.cookie 这个属性来完成,它是一个字符串接口,读写都走这里,但语法有点反直觉——不能直接用对象方式增删改查,得手动拼接和解析。
如何设置 Cookie
设置 Cookie 就是给 document.cookie 赋一个格式化的字符串。基本格式是:key=value; expires=...; path=/; domain=...; secure; HttpOnly(注意:HttpOnly 只能由服务端设置,JS 无法写入)。
最简设置:document.cookie = "username=john"; —— 会创建一个会话级 Cookie(关闭浏览器即失效) 带过期时间(UTC 时间):document.cookie = "theme=dark; expires=Thu, 01 Jan 2030 00:00:00 GMT"; 指定路径和域名(确保子路径可访问):document.cookie = "token=abc123; path=/; domain=.example.com; secure";
如何读取 Cookie
document.cookie 返回的是一个分号+空格分隔的字符串,比如:"username=john; theme=dark; token=abc123"。需要手动解析才能拿到某个 key 的值。
简单提取函数示例:
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;}// 使用:getCookie('username') → "john"
如何删除 Cookie
没有直接的删除方法,本质是“覆盖”:设置同名 Cookie,但把 expires 设为过去的时间(如 1970 年),浏览器就会立即丢弃它。
立即学习“Java免费学习笔记(深入)”;
删除示例:document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; 必须带上和原 Cookie 相同的 path 和 domain,否则可能删不掉(因为浏览器认为是另一个 Cookie)
更稳妥的做法:用工具函数封装
实际项目中建议封装 set/get/delete,自动处理编码、路径默认值、过期时间转换等细节。例如:
设置时自动加 path=/ 防止子路径读不到 值用 encodeURIComponent 编码,读取时用 decodeURIComponent 解码 支持传入毫秒数或 Date 对象作为过期时间,内部转成 GMT 字符串
基本上就这些。原生操作不复杂但容易忽略 path/domain/编码这些细节,一不小心就读不到或删不掉。
以上就是如何用javascript操作cookie_如何读取和设置?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542446.html
微信扫一扫
支付宝扫一扫