js-cookie详细介绍及在vue3中的使用方法

定义

js-cookie 是一个轻量、简单且强大的 JavaScript 库，用于在浏览器中轻松处理 Cookie。

优点

• ​​简单易用​​：API 设计直观，学习成本低

• ​​轻量级​​：压缩后仅约 5KB，对项目体积影响极小

• ​​兼容性好​​：支持所有现代浏览器，甚至包括旧版的 IE

安装

• 通过npm安装： npm install js-cookie
• 通过pnpm安装： pnpm install js-cookie
• 通过yarn安装 yarn add js-cookie

使用

首先在项目中引入并使用：

import Cookies from 'js-cookie'; // 在ES6模块化项目中引入

1. 设置 Cookie

使用 Cookies.set()方法，你可以设置一个 Cookie，并能控制其各种属性。

// 设置一个简单的 Cookie，关闭浏览器后失效
Cookies.set("userName", "zhangsan");
// 设置一个带过期时间的cookie,此示例表示设置的cookie，7天后失效
Cookies.set("token", "#qwewr12er@12344", { expires: 7 });
// 设置一个对特定路径有效的 Cookie
Cookies.set('userExample', 'dark', { path: '/example' });
// 设置一个仅通过 HTTPS 传输的安全 Cookie
Cookies.set('secureData', 'secret', { secure: true });
// 存储对象或数组 (库会自动使用 JSON.stringify 转换)
const userTheme = {theme: 'dark', language: 'zh-CN'};
Cookies.set('userTheme', userTheme, { expires: 30 });

2. 读取 Cookie

使用 Cookies.get()方法读取 Cookie。

// 读取单个 Cookie 的值
const  userName = Cookies.get('userName');
console.log(userName); // 输出 'zhangsan'
// 尝试读取一个不存在的 Cookie
const nothing = Cookies.get('nothing');
console.log(nothing); // 输出 undefined
// 读取所有可读的 Cookie (返回一个键值对对象)
const allCookies = Cookies.get();
console.log(allCookies); // 输出 { userName: 'zhangsan', token: '#qwewr12er@12344', ... }
// 读取并解析存储为对象的 Cookie
const settings = Cookies.getJSON('userTheme');
console.log(settings.theme); // 输出 'dark'

3.删除cookie

使用 Cookies.remove()方法删除 Cookie。​​如果设置 Cookie 时指定了路径 (path) 或域名 (domain)，删除时必须提供相同的参数​​，否则可能无法成功删除

// 删除一个在根路径设置的 Cookie
Cookies.remove('username');
// 删除一个在特定路径设置的 Cookie
Cookies.remove('userExample', { path: '/example' });
// 删除一个在特定域名设置的 Cookie
Cookies.remove('sessionID', { domain: 'www.example.com' });

前端具体使用场景

• 用户身份认证与状态管理​：这是 Cookie 最常见的用途。用户登录成功后，服务器会返回一个令牌（Token）或会话 ID，前端可以将其存储在 Cookie 中，并设置合适的有效期

// 登录成功后，存储认证令牌
Cookies.set('access_token', 'eyJhbGciOiJ...', { expires: 7, secure: true });

此后，该 Cookie 会随着每次请求自动发送到服务器，服务器通过验证此令牌来维持用户的登录状态，无需用户重复登录

• ​存储用户偏好设置​：记住用户的个性化选择，如主题、语言等，提升用户体验

// 用户选择深色主题后，存储用户选择的主题
Cookies.set('app_theme', 'dark', { expires: 365 });
// 页面加载时读取并应用设置
const theme = Cookies.get('app_theme') || 'light'; // 默认亮色主题
document.body.setAttribute('data-theme', theme);

• ​购物车信息暂存​：在电商网站中，将用户添加到购物车的商品信息临时存入 Cookie，即使用户关闭浏览器后再打开，内容也不会丢失

// 添加商品到购物车
const cartItems = [{ id: 101, name: 'T-Shirt', quantity: 2 }];
Cookies.set('shopping_cart', JSON.stringify(cartItems), { expires: 7 });
// 读取购物车
const savedCart = Cookies.get('shopping_cart');
if (savedCart) { 
    const items = JSON.parse(savedCart);
    // ...更新页面购物车显示 
}

• ​跟踪用户行为​：用于简单的用户行为跟踪，比如记录用户访问次数。

// 记录访问次数
let visitCount = parseInt(Cookies.get('visitCount') || 0);
visitCount++;
Cookies.set('visitCount', visitCount, { expires: 30 });
console.log(`用户访问次数：${visitCount}`);

注意事项

• 安全性：不要在 cookie 中存储敏感信息，如密码等。如果需要存储敏感信息，确保使用 Secure 和 HttpOnly 标志（但 JS-Cookie 无法设置 HttpOnly，因为需要通过 JavaScript 访问）。
• 大小限制：每个 cookie 通常不能超过 4KB。
• 域名和路径：设置 cookie 时要注意域名和路径，以免影响到其他页面。
• 过期时间：设置合理的过期时间，避免不必要的存储。

以上就是js-cookie的介绍及一些常见的使用场景，希望这些信息能帮助你更好地理解和使用 js-cookie