js-cookie 是什么插件,如何使用

• • 1. js-cookie 是什么插件，如何使用
• • 1.1. 一、js-cookie 是什么？
• • 1.2. 二、js-cookie 的使用方法
• • 1.2.1. 安装/引入 js-cookie
• • 1.2.1.1. 方式1：CDN 引入（直接在 HTML 中使用）
• • 1.2.1.2. 方式2：npm 安装（适用于 Vue/React 等工程化项目）
• • 1.2.2. 核心 API 使用（创建、读取、删除）
• • 1.2.2.1. （1）创建 Cookie
• • 1.2.2.2. （2）读取 Cookie
• • 1.2.2.3. （3）删除 Cookie
• • 1.3. 三、JavaScript 原生方法操作 Cookie
• • 1.3.1. 原生获取 Cookie 值的方法（两种核心实现思路）
• • 1.3.1.1. 方法1：拆分字符串 + 遍历匹配（最基础、易理解）
• • 1.3.1.2. 方法2：正则表达式匹配（更简洁、高效）
• • 1.3.2. 补充：原生设置/删除 Cookie
• • 1.4. 总结

1. js-cookie 是什么插件，如何使用

你想了解 js-cookie 这个插件的定义和具体使用方法，同时还想知道如何通过 JavaScript 原生方法获取 cookie 值，以及对应的具体实现方法有哪些。

1.1. 一、js-cookie 是什么？

js-cookie 是一个轻量级的 JavaScript 库（体积不足 2KB，无任何依赖），它的核心作用是简化原生 JavaScript 操作 Cookie 时的繁琐步骤，比如处理 Cookie 的过期时间、路径、域名、安全策略等，提供了简洁、直观的 API，是前端开发中操作 Cookie 的常用插件。

1.2. 二、js-cookie 的使用方法

1.2.1. 安装/引入 js-cookie

有两种常用方式引入：

1.2.1.1. 方式1：CDN 引入（直接在 HTML 中使用）

<scriptsrc="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>

1.2.1.2. 方式2：npm 安装（适用于 Vue/React 等工程化项目）

//# 安装npm install js-cookie --save//# 或yarn add js-cookie

在项目中引入：

// ES6 模块化引入importCookiesfrom'js-cookie';// 或 CommonJS 引入constCookies = require('js-cookie');

1.2.2. 核心 API 使用（创建、读取、删除）

1.2.2.1. （1）创建 Cookie

// 1. 基础创建：设置键为name，值为zhangsan的Cookie（会话级，浏览器关闭则失效）Cookies.set('name', 'zhangsan');// 2. 设置过期时间：7天后过期Cookies.set('age', '18', { expires: 7 });// 3. 自定义路径：仅在 /admin 路径下生效Cookies.set('token', 'abc123', { expires: 7, path: '/admin' });// 4. 自定义域名：仅在 .example.com 域名及子域名下生效Cookies.set('uid', '1001', { expires: 7, domain: '.example.com' });// 5. 安全Cookie：仅在 HTTPS 协议下传输（生产环境推荐）Cookies.set('info', 'secure', { expires: 7, secure: true });// 6. SameSite 属性：防止CSRF攻击，可选值 Strict/Lax/NoneCookies.set('data', '123', { expires: 7, sameSite: 'Lax' });

1.2.2.2. （2）读取 Cookie

// 1. 读取单个Cookieconst name = Cookies.get('name'); // 输出：zhangsan// 2. 读取所有Cookie（返回一个对象，包含所有Cookie键值对）const allCookies = Cookies.get(); // 输出：{ name: 'zhangsan', age: '18', ... }// 3. 读取不存在的Cookie，返回undefinedconst nonExist = Cookies.get('nonExist'); // 输出：undefined

1.2.2.3. （3）删除 Cookie

// 1. 基础删除：删除name对应的CookieCookies.remove('name');// 2. 删除带路径/域名的Cookie：必须和创建时的参数一致，否则删除失败Cookies.remove('token', { path: '/admin' });Cookies.remove('uid', { domain: '.example.com' });

1.3. 三、JavaScript 原生方法操作 Cookie

原生 JavaScript 没有专门的 Cookie API，而是通过 document.cookie 来操作 Cookie。document.cookie 是一个特殊的字符串，格式为：key1=value1; key2=value2; key3=value3（键值对之间用分号+空格分隔）。

1.3.1. 原生获取 Cookie 值的方法（两种核心实现思路）

1.3.1.1. 方法1：拆分字符串 + 遍历匹配（最基础、易理解）

核心思路：将 document.cookie 按 ; 拆分成数组，遍历数组再按 = 拆分键值对，匹配目标键并返回值。

/** * 原生获取Cookie值（拆分遍历法） * @param {string} key - 要获取的Cookie键名 * @returns {string|undefined} - Cookie值，不存在则返回undefined */functiongetCookieBySplit(key) {// 1. 若没有Cookie，直接返回undefinedif (!document.cookie) returnundefined;// 2. 拆分Cookie字符串为键值对数组const cookieArr = document.cookie.split('; ');// 3. 遍历数组匹配键名for (const cookie of cookieArr) {const [cookieKey, cookieValue] = cookie.split('=');// 4. 匹配成功则返回值（注意解码，因为Cookie值可能被编码）if (cookieKey === key) returndecodeURIComponent(cookieValue);  }// 5. 未匹配到返回undefinedreturnundefined;}// 测试使用const name = getCookieBySplit('name'); // 输出：zhangsanconst age = getCookieBySplit('age'); // 输出：18

1.3.1.2. 方法2：正则表达式匹配（更简洁、高效）

核心思路：使用正则表达式直接匹配目标键对应的值，省去遍历步骤。

/** * 原生获取Cookie值（正则匹配法） * @param {string} key - 要获取的Cookie键名 * @returns {string|undefined} - Cookie值，不存在则返回undefined */functiongetCookieByReg(key) {// 构造正则：匹配 key= 后面的所有字符（直到;或结束）const reg = newRegExp(`(^| )${key}=([^;]*)(;|$)`);// 执行正则匹配const match = document.cookie.match(reg);// 匹配成功则返回值（解码），否则返回undefinedreturn match ? decodeURIComponent(match[2]) : undefined;}// 测试使用const token = getCookieByReg('token'); // 输出：abc123const uid = getCookieByReg('uid'); // 输出：1001

1.3.2. 补充：原生设置/删除 Cookie

// 原生设置Cookie（格式：key=value; expires=日期; path=/; domain=域名; secure）functionsetCookie(key, value, days = 7) {// 1. 计算过期日期const date = newDate();  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);const expires = `expires=${date.toUTCString()}`;// 2. 设置Cookie（注意编码，防止值中有特殊字符）document.cookie = `${key}=${encodeURIComponent(value)}; ${expires}; path=/`;}// 原生删除Cookie（将过期时间设为过去的时间即可）functiondeleteCookie(key) {setCookie(key, '', -1); // 过期时间设为-1天，立即失效}

1.4. 总结

1. 1. js-cookie 是轻量级的 Cookie 操作库，通过 set/get/remove 三个核心 API 简化了 Cookie 的创建、读取、删除，还支持过期时间、路径、域名等配置，使用前需先安装/引入。
2. 2. 原生 JavaScript 获取 Cookie 的核心是解析 document.cookie 字符串，主要有拆分字符串+遍历匹配和正则表达式匹配两种实现方法，前者易理解，后者更简洁高效。
3. 3. 原生操作 Cookie 时需注意对值进行编码（encodeURIComponent）和解码（decodeURIComponent），避免特殊字符导致的问题。

更多详细内容，请微信搜索”前端爱好者”， 戳我 查看 。