jquery.cookie.js：一个让 Cookie 操作变简单的小工具

Hi我是前端人类学在前端开发中Cookie 是一个绕不开的话题。无论是记录用户登录状态、存储偏好设置还是追踪用户行为Cookie 都在默默承担着数据存储的职责。但原生 JavaScript 操作 Cookie 的 API——document.cookie——说实话用起来并不那么顺手。于是jquery.cookie.js应运而生。文章目录一、它是什么二、快速上手2.1 写入 Cookie2.2 读取 Cookie2.3 删除 Cookie三、几个实用的配置3.1 自动处理 JSON3.2 关闭自动编码四、Cookie 选项详解五、一个实际例子一、它是什么jquery.cookie.js是一个轻量级的 jQuery 插件专门用于简化 Cookie 的读取、写入和删除操作。由 Klaus Hartl 开发代码简洁API 设计直观一度成为前端项目中操作 Cookie 的首选方案。它的核心理念很简单把复杂的 Cookie 操作封装成几个直观的方法。二、快速上手使用前需要先引入 jQuery再引入插件scriptsrchttps://cdn.staticfile.org/jquery/3.4.0/jquery.min.js/scriptscriptsrchttps://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js/script注意引入顺序很重要必须先有 jQuery插件才能正常工作。2.1 写入 Cookie创建一个会话 Cookie浏览器关闭即失效$.cookie(username,张三);创建一个 7 天后过期的 Cookie$.cookie(user_token,abc123,{expires:7});创建一个在整个网站中都可访问的 Cookie$.cookie(site_preference,dark,{path:/});2.2 读取 Cookie读取单个 Cookievarusername$.cookie(username);// 返回 张三varnothing$.cookie(not_exist);// 返回 null读取所有 CookievarallCookies$.cookie();// 返回 { username: 张三, ... }2.3 删除 Cookie删除操作同样简单$.removeCookie(username);// 删除成功返回 true否则返回 false但这里有个容易踩的坑删除时必须使用与写入时完全相同的path、domain和secure选项否则删除会失败。// 写入时指定了 path$.cookie(token,value,{path:/});// 以下写法删除失败$.removeCookie(token);// false// 必须带上相同的 path$.removeCookie(token,{path:/});// true三、几个实用的配置插件提供了两个全局配置能让使用体验更好3.1 自动处理 JSON开启后可以直接存储和读取 JavaScript 对象省去手动JSON.stringify和JSON.parse的步骤$.cookie.jsontrue;$.cookie(user_settings,{theme:dark,language:zh});varsettings$.cookie(user_settings);// 直接得到对象3.2 关闭自动编码默认情况下Cookie 值会经过encodeURIComponent编码读取时自动解码。如果不需要可以关闭$.cookie.rawtrue;四、Cookie 选项详解选项类型说明expiresNumber / Date有效期数字代表天数。省略则创建会话 CookiepathStringCookie 有效路径默认是当前页面路径。设为/则全站可用domainStringCookie 有效域名默认当前域名secureBoolean是否仅通过 HTTPS 传输默认false五、一个实际例子假设我们要记录用户的主题偏好script$(document).ready(function(){// 检查是否已有偏好vartheme$.cookie(theme_preference);if(!theme){// 默认设为明亮模式$.cookie(theme_preference,light,{expires:30,path:/});themelight;}// 应用主题$(body).addClass(theme-theme);// 切换主题时更新 Cookie$(#theme-toggle).click(function(){varnewTheme$(body).hasClass(theme-light)?dark:light;$(body).removeClass(theme-light theme-dark).addClass(theme-newTheme);$.cookie(theme_preference,newTheme,{expires:30,path:/});});});/scriptjquery.cookie.js虽小却解决了实际开发中的痛点。它把原本需要手动拼接字符串的 Cookie 操作变成了优雅的方法调用让代码更加清晰、可维护。当然作为一个诞生于 jQuery 生态的插件它目前已经不再维护。对于新项目原生document.cookie已经足够好用或者也可以考虑独立于 jQuery 的现代 Cookie 库如js-cookie。但它的设计思路和 API 风格至今仍有参考价值。毕竟好的工具不在于它有多新而在于它是否帮开发者解决了问题。这一点jquery.cookie.js做到了。