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。










