jQuery-Cookie 代码复用技巧：封装通用 Cookie 工具函数

jQuery-Cookie 代码复用技巧：封装通用 Cookie 工具函数

【免费下载链接】jquery-cookie No longer maintained, superseded by JS Cookie: 项目地址: https://gitcode.com/gh_mirrors/jq/jquery-cookie

你是否还在为项目中重复编写 Cookie 操作代码而烦恼？是否遇到过不同页面 Cookie 处理逻辑不统一的问题？本文将基于 src/jquery.cookie.js 源码，详细介绍如何封装通用的 Cookie 工具函数，帮助你一文解决前端 Cookie 操作的复用难题。读完本文，你将掌握：基础 Cookie 操作封装、高级配置处理、批量操作实现及实际应用场景分析。

基础操作封装：简化核心功能

读取 Cookie

jQuery-Cookie 核心读取逻辑位于 76-103 行，通过解析 document.cookie 实现。封装后的读取函数可直接获取指定 Cookie 值，无需重复解析逻辑：

// 简化版 Cookie 读取函数
function getCookie(key) {
  return $.cookie(key);
}

设置 Cookie

源码 59-74 行实现了 Cookie 设置功能，包含过期时间、路径等参数处理。封装时可预设常用配置，减少重复代码：

// 带默认配置的 Cookie 设置函数
function setCookie(key, value, days = 7) {
  return $.cookie(key, value, { 
    expires: days,
    path: '/'  // 默认根路径，确保全站可访问
  });
}

删除 Cookie

利用 $.removeCookie 方法封装删除函数，自动处理过期时间：

// 简化 Cookie 删除
function removeCookie(key) {
  return $.removeCookie(key, { path: '/' });
}

高级配置处理：统一参数管理

jQuery-Cookie 支持丰富的配置参数（expires、path、domain 等）。通过封装配置管理器，可实现全局默认配置与局部自定义配置的灵活切换：

// Cookie 配置管理器
const CookieConfig = {
  defaults: {
    path: '/',
    secure: window.location.protocol === 'https:'  // 自动适配 HTTPS
  },
  
  setDefaults(options) {
    this.defaults = { ...this.defaults, ...options };
  },
  
  getOptions(customOptions) {
    return { ...this.defaults, ...customOptions };
  }
};

// 使用示例：设置全局默认域名
CookieConfig.setDefaults({ domain: 'example.com' });

批量操作实现：提升处理效率

针对多 Cookie 操作场景，基于源码 82-101 行的遍历逻辑，封装批量处理函数：

批量读取

// 批量获取 Cookie
function getCookies(keys) {
  return keys.reduce((result, key) => {
    result[key] = $.cookie(key);
    return result;
  }, {});
}

// 使用示例
const userCookies = getCookies(['username', 'token', 'theme']);

批量删除

// 批量删除 Cookie
function removeCookies(keys) {
  return keys.every(key => removeCookie(key));
}

实际应用场景：用户偏好设置

结合 test/tests.js 中的测试用例，展示封装函数在用户偏好设置中的应用：

// 用户偏好管理模块
const UserPreferences = {
  // 存储用户主题偏好
  saveTheme(theme) {
    setCookie('userTheme', theme, 365);  // 有效期1年
  },
  
  // 获取所有偏好设置
  getPreferences() {
    return getCookies(['userTheme', 'fontSize', 'notifications']);
  },
  
  // 清除所有偏好
  clearPreferences() {
    return removeCookies(['userTheme', 'fontSize', 'notifications']);
  }
};

注意事项与版本兼容

项目 README.md 中提到该库已停止维护，建议生产环境考虑替代方案。若继续使用，需注意：

1. IE 兼容性：源码 69 行使用 toUTCString()，需确保目标浏览器支持
2. 安全风险：敏感信息避免存储在 Cookie 中，建议使用 secure 和 httpOnly 配置

通过合理封装 jQuery-Cookie 提供的核心能力，可显著提升代码复用率与可维护性。建议结合实际项目需求扩展工具函数，如添加数据加密、过期提醒等功能。

【免费下载链接】jquery-cookie No longer maintained, superseded by JS Cookie: 项目地址: https://gitcode.com/gh_mirrors/jq/jquery-cookie