jQuery Cookie 插件（千字长文）

在网页开发中，我们常常需要在客户端保存一些临时数据，比如用户的偏好设置、登录状态、购物车信息等。浏览器原生提供的 localStorage 和 sessionStorage 虽然强大，但它们的使用方式对新手来说略显复杂，而且在某些老项目中，尤其是基于 jQuery 的项目里，开发者更倾向于使用成熟稳定的插件来简化操作。

这时，jQuery Cookie 插件就派上了用场。它是一个轻量级的第三方库，专门为 jQuery 提供了对 Cookie 的完整支持。通过它，你可以像操作 JavaScript 对象一样轻松地读取、写入和删除 Cookie，而无需关心底层的字符串拼接和编码问题。

你可以把 Cookie 想象成一个“小纸条”，浏览器会把它悄悄存放在你的电脑里。每次访问网站时，浏览器都会自动把这张“纸条”拿出来，交给服务器看。而 jQuery Cookie 插件，就是帮你快速写、读、擦掉这张纸条的“文具盒”。

这个插件体积小、兼容性好，支持现代浏览器，也兼容 IE 8+，非常适合在传统项目中使用。更重要的是，它的 API 设计非常直观，学习成本极低。

要使用 jQuery Cookie 插件，第一步是引入它。目前最常用的版本是 jquery.cookie.js，你可以通过 CDN 直接引入，也可以下载到本地项目中。

使用 CDN 引入（推荐初学者）

<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery Cookie 插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

⚠️ 注意：必须先引入 jQuery，再引入 Cookie 插件，否则会报错。

本地引入方式

如果你的项目不允许使用 CDN，可以将 jquery.cookie.min.js 文件下载到本地，比如放在 js/ 目录下，然后通过相对路径引入：

<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>

引入成功后，你就可以在 JavaScript 中使用 $.cookie() 方法了。

使用 $.cookie() 设置 Cookie 非常简单，只需传入键名和值即可。

// 设置一个名为 "username" 的 Cookie，值为 "张三"
$.cookie('username', '张三');

// 附加过期时间（单位：天）
$.cookie('username', '张三', { expires: 7 });

// 设置路径（默认是根路径 /）
$.cookie('username', '张三', { expires: 7, path: '/' });

// 设置域（domain）用于跨子域共享
$.cookie('username', '张三', { expires: 7, domain: 'example.com' });

💡 注释：expires: 7 表示该 Cookie 会在 7 天后自动过期。如果不设置 expires，Cookie 就是会话级别的，关闭浏览器就消失。

读取 Cookie 只需传入键名，就会返回对应的值。

// 读取名为 "username" 的 Cookie
var username = $.cookie('username');

// 如果存在，username 的值是 "张三"；如果不存在，返回 null
console.log(username); // 输出：张三

📌 小提示：如果 Cookie 不存在，$.cookie() 返回 null，而不是 undefined，这一点在判断时要注意。

删除 Cookie 的方式是将值设为 null，并设置过期时间为过去的时间。

// 删除名为 "username" 的 Cookie
$.cookie('username', null, { expires: -1, path: '/' });

// 或者更简洁的方式
$.removeCookie('username');

✅ $.removeCookie() 是一个快捷方法，等价于将 Cookie 值设为 null 并设置过期时间。

除了基本的读写删除，jQuery Cookie 插件还支持多种高级配置，让你能更灵活地控制 Cookie 的行为。

配置项	说明	示例
`expires`	过期时间（天数）	`{ expires: 30 }`
`path`	Cookie 可访问的路径	`{ path: '/admin' }`
`domain`	Cookie 所属的域名	`{ domain: 'example.com' }`
`secure`	是否仅通过 HTTPS 传输	`{ secure: true }`
`httpOnly`	是否禁止 JavaScript 访问（服务器端控制）	`不支持`

⚠️ 注意：httpOnly 不被 jQuery Cookie 插件支持，这是服务器端控制的特性。

实际案例：记住用户偏好

假设你有一个网站的“夜间模式”开关，用户点击后希望下次访问时仍然保持这个设置。

// 用户点击“开启夜间模式”
$('#night-mode').on('click', function () {
    // 设置 Cookie，保存用户选择
    $.cookie('nightMode', 'on', { expires: 365, path: '/' });
    
    // 切换页面样式
    $('body').addClass('dark-theme');
});

// 页面加载时，检查是否有夜间模式的设置
$(document).ready(function () {
    var mode = $.cookie('nightMode');
    
    if (mode === 'on') {
        $('body').addClass('dark-theme');
        $('#night-mode').text('关闭夜间模式');
    }
});

🌙 这个例子中，Cookie 被保存一年（365 天），并且路径设为根目录，确保所有页面都能读取。

处理复杂数据：序列化与反序列化

Cookie 只能存储字符串，不能直接保存对象或数组。但你可以用 JSON.stringify 和 JSON.parse 来实现。

存储对象数据

// 定义一个用户信息对象
var userInfo = {
    name: '李四',
    age: 28,
    city: '北京'
};

// 将对象序列化为字符串再存入 Cookie
$.cookie('userInfo', JSON.stringify(userInfo), { expires: 30, path: '/' });

读取并还原对象

// 从 Cookie 中读取字符串
var raw = $.cookie('userInfo');

// 如果存在，解析成对象
if (raw) {
    var userInfo = JSON.parse(raw);
    console.log(userInfo.name); // 输出：李四
    console.log(userInfo.age);  // 输出：28
} else {
    console.log('未找到用户信息');
}

📌 小技巧：在保存前用 JSON.stringify，读取后用 JSON.parse，是处理复杂数据的标准做法。

常见问题与最佳实践

每个 Cookie 最大容量为 4KB，建议不要存储过大的数据。如果需要保存大量信息，应考虑使用 localStorage。

2. 安全性提醒

不要在 Cookie 中存储密码、身份证号等敏感信息。
若需传输敏感数据，应启用 secure 标志，确保仅通过 HTTPS 传输。

$.cookie('token', 'abc123', { expires: 1, secure: true, path: '/' });

3. 跨域问题

Cookie 默认只能在同域下访问。若需跨子域共享，需设置 domain 属性。

$.cookie('sessionId', '12345', { expires: 1, domain: '.example.com' });

✅ 以 .example.com 开头表示所有子域（如 admin.example.com）都能访问。

对于仍在使用 jQuery 的项目，或者希望快速实现 Cookie 功能的开发者来说，jQuery Cookie 插件是一个非常实用的工具。它封装了繁琐的 Cookie 操作，让开发者能专注于业务逻辑，而不是字符串拼接和编码细节。

它的 API 简洁明了，文档完善，社区支持良好。即使你是初学者，只要理解了“键值对”的概念，就能快速上手。

在实际项目中，它特别适合用于：

记住用户偏好设置
实现“下次自动登录”功能
跟踪用户行为（如访问次数）
临时保存表单数据

虽然现代前端框架（如 Vue、React）更倾向于使用 localStorage，但在维护老项目或轻量级应用中，jQuery Cookie 插件依然有不可替代的价值。

掌握它，就像掌握了一把打开客户端存储之门的钥匙。别忘了，每一次用户访问，都是一次“记忆”的延续——而 jQuery Cookie 插件，正是帮你实现这段记忆的关键。

什么是 jQuery Cookie 插件？

安装与引入 jQuery Cookie 插件

使用 CDN 引入（推荐初学者）

本地引入方式

基本操作：设置、读取与删除 Cookie

设置 Cookie

读取 Cookie

删除 Cookie

高级配置：自定义 Cookie 属性