前端开发 Cookie操作 jq获取cookie的多种方法与实用技巧

🍪 前端Cookie操作大全：jQuery花式操作技巧大公开！

🔥 2025年8月最新动态
W3C近期在《Web存储标准草案》中强调，尽管现代前端更推荐使用localStorage和SessionStorage，但Cookie在会话管理、跨域认证等场景仍不可替代，Chrome 118版本还优化了SameSite策略的默认行为，开发者需特别注意第三方Cookie的兼容性！

Cookie基础速览

Cookie是存储在用户浏览器中的小型文本数据,常用于身份验证、个性化设置等场景。

// 经典Cookie格式  
document.cookie = "username=张三; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";  

特性备忘：
✅ 最大4KB
✅ 随每次请求自动发送（同域下）
❌ 明文存储，敏感数据需加密

jQuery操作Cookie的5种姿势

方法1：原生JS混搭法

jQuery本身无直接操作Cookie的API,但可配合原生JS：

// 写入Cookie  
$.extend({  
  setCookie: (name, value, days) => {  
    const expires = days ? `; expires=${new Date(Date.now() + days * 864e5).toUTCString()}` : '';  
    document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;  
  }  
});  
// 调用示例  
$.setCookie("theme", "dark", 30); // 30天后过期  

方法2：经典插件jquery.cookie

（需先引入插件）

// 增删改查一条龙  
$.cookie("cart", JSON.stringify({id: 101})); // 存对象  
const cart = $.cookie("cart"); // 取数据  
$.removeCookie("cart"); // 删除  

💡 插件技巧：

• 自动序列化JSON对象
• 支持expires、path、domain参数

方法3：正则表达式提取法

适合快速获取特定Cookie值：

$.getCookie = name => {  
  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));  
  return match ? decodeURIComponent(match[2]) : null;  
};  
console.log($.getCookie("user_token")); // 输出token值  

方法4：$.ajax预配置法

自动携带Cookie的AJAX请求：

$.ajax({  
  url: "/api/user",  
  xhrFields: { withCredentials: true }, // 关键配置！  
  success: data => console.log("跨域请求带Cookie成功！")  
});  

方法5：Hack式批量操作

一次性读取所有Cookie并转为对象：

$.getAllCookies = () => {  
  return document.cookie.split(';').reduce((obj, str) => {  
    const [key, val] = str.trim().split('=');  
    obj[key] = decodeURIComponent(val);  
    return obj;  
  }, {});  
};  
console.log($.getAllCookies()); // {username: "李四", theme: "light"}  

实战避坑指南

🚨 安全必看

• HttpOnly：防止XSS窃取敏感Cookie

  document.cookie = "auth_token=abc123; HttpOnly"; // 后端设置更常见  

• Secure：仅HTTPS传输

  document.cookie = "session_id=xyz; Secure";  

🌍 跨域难题

• 第三方Cookie需配置：

  document.cookie = "widget_id=789; SameSite=None; Secure";  

⏱️ 过期时间陷阱

// 错误写法（时区问题可能导致立即过期）  
$.cookie("temp", "data", { expires: new Date("2025-08-20") });  
// 正确写法  
$.cookie("temp", "data", { expires: 7 }); // 7天后过期  

扩展思考

🆚 Cookie vs Web Storage

� 现代替代方案

• JWT：无状态Token认证
• IndexedDB：大规模结构化数据存储

🎯 总结：虽然Cookie看似"古老"，但在会话控制、SSO登录等场景仍是无可替代的解决方案，掌握jQuery操作技巧，能让你在维护老项目时事半功倍！2025年的前端开发者，既要拥抱新技术，也要守住这些经典武器的锋利度哦~