js怎样操作cookie数据 js操作cookie的4个实用函数分享

JavaScript 操作 Cookie 的核心是通过 document.cookie 属性实现，需掌握设置、获取、删除和检查的封装方法。以下是四个实用函数及关键注意事项：

1. 设置 Cookie (setCookie)function setCookie(name, value, days) { let expires = ""; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/";}

参数说明：
name：Cookie 名称（必填）。
value：Cookie 值（可选，空字符串表示删除）。
days：过期天数（可选，不传则为会话级 Cookie）。
关键点：
使用 toUTCString() 确保时间格式兼容性。
path=/ 指定 Cookie 在整个域名下有效。
若需跨子域名，可添加 domain=.example.com。

2. 获取 Cookie (getCookie)function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') { c = c.substring(1, c.length); } if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length, c.length); } } return null;}

逻辑解析：
按 ; 分割 document.cookie 字符串。
遍历每个 Cookie，移除前导空格。
匹配 name= 开头的字符串并返回值。
示例：setCookie("user", "Alice", 7);console.log(getCookie("user")); // 输出 "Alice"

3. 删除 Cookie (eraseCookie)function eraseCookie(name) { document.cookie = name + '=; Max-Age=-99999999;';}

替代方案：// 使用 expires 属性function eraseCookie(name) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';}
原理：通过设置过期时间为过去值或极大负数 Max-Age 立即删除 Cookie。

4. 检查 Cookie 是否存在 (hasCookie)function hasCookie(name) { return document.cookie.indexOf(name + '=') > -1;}

局限性：仅检查名称是否存在，无法区分空值 Cookie（如 name=）。
改进建议：结合 getCookie 判断值是否为 null。

安全性与隐私保护

敏感信息处理：
避免存储密码、银行卡号等，若必须存储需加密（如 AES）。
示例加密函数：function encrypt(text) { // 实际项目应使用加密库（如 CryptoJS） return btoa(unescape(encodeURIComponent(text)));}
属性设置：
HttpOnly：防止 XSS 攻击（需后端配合，如 Node.js 的 httpOnly: true）。
Secure：仅 HTTPS 传输，防止中间人攻击。
SameSite：限制跨站请求（如 SameSite=Strict）。

性能优化

大小限制：单个 Cookie ≤ 4KB，域名下 ≤ 50 个。
合并策略：将多个小 Cookie 合并为 JSON 字符串。setCookie("appData", JSON.stringify({ theme: "dark", lang: "en" }), 30);const data = JSON.parse(getCookie("appData"));
替代方案：Local Storage（5MB/域名）或 Session Storage。

兼容性处理

第三方库：推荐使用
js-cookie
处理编码和旧浏览器问题。// 使用 js-cookie 设置带编码的 CookieCookies.set('name', '值', { expires: 7, secure: true });
编码统一：手动处理特殊字符（如 encodeURIComponent）。function safeSetCookie(name, value, days) { const encodedValue = encodeURIComponent(value); document.cookie = `${name}=${encodedValue}; expires=...; path=/`;}

完整示例// 设置带安全属性的 CookiesetCookie("session", "abc123", 1);document.cookie = "secureCookie=data; Secure; SameSite=Lax";// 获取并解密const encrypted = getCookie("user");if (encrypted) console.log(decrypt(encrypted)); // 需实现 decrypt// 删除所有 Cookie（遍历删除）function clearAllCookies() { const cookies = document.cookie.split(';'); cookies.forEach(cookie => { const name = cookie.split('=')[0].trim(); eraseCookie(name); });}

通过封装上述函数，可高效管理 Cookie，同时兼顾安全性、性能和兼容性。实际项目中建议结合加密库和现代存储方案（如 IndexedDB）处理复杂数据。

您可能感兴趣问答

Collapsible

热门标签

热点问答