js-cookie：轻量级浏览器 Cookie 管理库完全指南

js-cookie：轻量级浏览器 Cookie 管理库完全指南

【免费下载链接】js-cookieA simple, lightweight JavaScript API for handling browser cookies项目地址: https://gitcode.com/gh_mirrors/js/js-cookie

js-cookie 是一个简单、轻量级的 JavaScript API，专门用于处理浏览器 Cookie。这个强大的库让开发者能够轻松地创建、读取和删除 Cookie，而无需担心复杂的原生 API。

项目概述

js-cookie 是一个专注于简化浏览器 Cookie 操作的 JavaScript 库。它提供了直观的 API 接口，让开发者能够以更优雅的方式管理客户端数据存储。

核心特性：

• 广泛的浏览器支持
• 支持任何字符编码
• 经过充分测试
• 无任何依赖
• 支持 ES 模块和 CommonJS
• 符合 RFC 6265 标准
• 支持自定义编码/解码
• 压缩后小于 800 字节

安装方式

通过 NPM 安装

npm install js-cookie

npm 包提供了module字段指向 ES 模块变体，同时browser字段指向 UMD 模块以保持向后兼容性。

直接引入

可以通过 CDN 直接引入库文件：

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

基础使用

导入库

import Cookies from 'js-cookie' // 或 const Cookies = require('js-cookie')

设置 Cookie

创建基础 Cookie：

Cookies.set('username', 'john_doe')

设置带过期时间的 Cookie：

Cookies.set('session_id', 'abc123', { expires: 7 }) // 7天后过期

读取 Cookie

读取单个 Cookie：

const username = Cookies.get('username') // 返回 'john_doe'

读取所有可见的 Cookie：

const allCookies = Cookies.get() // 返回对象 { username: 'john_doe', session_id: 'abc123' }

删除 Cookie

删除 Cookie 非常简单：

Cookies.remove('username')

Cookie 属性配置

js-cookie 支持所有标准的 Cookie 属性：

Cookies.set('preference', 'dark', { expires: 30, path: '/settings', domain: '.example.com', secure: true, sameSite: 'strict' })

过期时间

定义 Cookie 何时被删除。值可以是数字（表示天数）或 Date 对象。

Cookies.set('name', 'value', { expires: 365 })

路径限制

指定 Cookie 可见的路径：

Cookies.set('name', 'value', { path: '' }) Cookies.get('name') // => 'value' Cookies.remove('name', { path: '' }) // 成功删除

安全设置

设置安全传输要求：

Cookies.set('name', 'value', { secure: true })

转换器功能

自定义读取转换器

创建新的 API 实例来覆盖默认的解码实现：

document.cookie = 'escaped=%u5317' document.cookie = 'default=%E5%8C%97' var cookies = Cookies.withConverter({ read: function (value, name) { if (name === 'escaped') { return unescape(value) } // 其他 Cookie 使用默认处理 return Cookies.converter.read(value, name) } }) cookies.get('escaped') // 北 cookies.get('default') // 北 cookies.get() // { escaped: '北', default: '北' }

自定义写入转换器

覆盖默认的编码实现：

Cookies.withConverter({ write: function (value, name) { return value.toUpperCase() } })

实际应用场景

用户偏好设置

存储用户的界面主题、语言偏好等设置：

// 保存用户主题偏好 Cookies.set('theme', 'dark', { expires: 365 }) // 读取主题设置 const theme = Cookies.get('theme') || 'light'

会话管理

管理用户登录状态：

// 用户登录时设置会话 Cookie Cookies.set('auth_token', token, { secure: true, sameSite: 'strict' }) // 检查用户是否登录 const isLoggedIn = !!Cookies.get('auth_token')

默认属性设置

可以全局设置 Cookie 属性的默认值：

const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })

编码处理

js-cookie 符合 RFC 6265 标准。所有不允许在 cookie 名称或值中使用的特殊字符都使用其 UTF-8 十六进制等效值进行百分号编码。

最佳实践

1. 安全性考虑：敏感信息应设置 secure 和 httpOnly 标志
2. 过期时间：合理设置 Cookie 的过期时间，避免永久存储
3. 路径限制：使用 path 属性限制 Cookie 的可见范围
4. 大小限制：注意单个 Cookie 的大小限制（约 4KB）

总结

js-cookie 是一个功能强大且易于使用的 Cookie 管理库，它显著简化了浏览器 Cookie 的操作流程。无论你是构建简单的静态网站还是复杂的企业级应用，js-cookie 都能提供可靠的支持。

通过掌握 js-cookie 的使用技巧，开发者能够更高效地处理客户端数据存储，提升 Web 应用的用户体验和安全性。

【免费下载链接】js-cookieA simple, lightweight JavaScript API for handling browser cookies项目地址: https://gitcode.com/gh_mirrors/js/js-cookie