JavaScript可通过document.cookie读写Cookie，用于存储用户状态；写入时设置键值对及过期时间、路径等参数；读取需解析字符串并解码；删除则通过设置过期时间实现；建议封装工具函数统一操作。
JavaScript 可以直接在浏览器中操作 Cookie，用于存储少量用户数据，比如登录状态、偏好设置等。虽然现在有 localStorage 和 sessionStorage 更现代的替代方案，但在需要与服务器共享状态时，Cookie 依然是重要手段。下面详细介绍 JS 如何读取、写入和删除 Cookie。
写入 Cookie
使用 document.cookie 可以添加或修改 Cookie。注意：它不是普通变量，而是特殊的访问器属性，每次赋值都会新增或更新一个 Cookie。
基本语法：
document.cookie = “key=value; expires=expires_date; path=/; domain=example.com; secure; samesite=strict”;
常用参数说明：
立即学习“Java免费学习笔记（深入）”；
expires：过期时间，GMT 格式（可用 toUTCString()）；不设则为会话 Cookie，关闭浏览器即失效max-age：以秒为单位的存活时间，比 expires 更现代path：指定哪些路径可以访问该 Cookie，默认为当前路径domain：指定域名，子域名可访问父域设置的 Cookie（需显式指定）secure：仅在 HTTPS 下传输samesite：防止 CSRF，可选 strict、lax、none
示例：设置一个7天后过期的用户偏好 Cookie
const date = new Date();date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));const expires = “expires=” + date.toUTCString();document.cookie = “theme=dark; ” + expires + “; path=/”;
读取 Cookie
document.cookie 在读取时返回所有同域 Cookie 的字符串，格式为 key1=value1; key2=value2，需要手动解析。
获取指定 Cookie 值的通用方法：
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;}
使用示例：
const theme = getCookie(“theme”); // 返回 “dark” 或 null
注意：Cookie 值可能包含特殊字符，建议用 decodeURIComponent 解码，写入时对应使用 encodeURIComponent。
删除 Cookie
没有直接删除的方法。正确做法是设置 Cookie 的 expires 为过去的时间，或 max-age=0，并确保 path 和 domain 与原设置一致。
删除示例：
function deleteCookie(name, path = ‘/’) { document.cookie = name + “=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=” + path;}
调用：
deleteCookie(“theme”);
如果原 Cookie 设置了 domain 或 secure，删除时也应加上相同属性，否则可能无法清除。
实用封装：Cookie 操作工具函数
将常用操作封装成一个简洁的工具：
const Cookie = { set(name, value, days = 7, path = ‘/’) { 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=’ + path; },
get(name) {const cookies = document.cookie.split(‘; ‘);for (let cookie of cookies) {const [key, value] = cookie.split(‘=’);if (decodeURIComponent(key) === name) {return decodeURIComponent(value);}}return null;},
remove(name, path = ‘/’) {this.set(name, ”, -1, path);}};
使用方式：
Cookie.set(‘username’, ‘john_doe’, 30);Cookie.get(‘username’); // “john_doe”Cookie.remove(‘username’);
基本上就这些。掌握读、写、删三步，再注意编码和路径域的一致性，就能安全有效地用 JS 操作 Cookie。
以上就是JS如何操作Cookie_JavaScriptCookie读写与删除方法完整教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536282.html
微信扫一扫 
支付宝扫一扫 
