当前位置：首页 > news >正文

js-cookie详细介绍

news 2025/7/4 12:00:43

js-cookie 是一个简单、轻量的 JavaScript API，用于处理浏览器 cookies。它提供了一种方便的方式来创建、读取和删除 cookies，而不需要直接操作 document.cookie。以下是对 js-cookie 的详细介绍：

特点

简单易用：js-cookie 提供了简单的方法来操作 cookies，如 Cookies.set、Cookies.get 和 Cookies.remove，使得 cookie 操作直观易懂。
兼容性好：支持所有现代浏览器，包括旧版浏览器如 Internet Explorer 6+。
轻量级：压缩后的文件大小仅约 5KB，不会对页面加载性能产生显著影响。
模块化：支持 CommonJS、AMD 以及 ES6 模块导入方式，便于在各种项目中使用。

基本用法

以下是 js-cookie 的一些基本用法示例：

设置 Cookie：
```
import Cookies from "js-cookie";
Cookies.set('name', 'value');
```
可以设置 cookie 的过期时间、路径、域等属性。例如，创建有效期为 7 天的 cookie：
```
Cookies.set('key', 'value', { expires: 7 }); // 7 天后失效
```
也可以设置时间戳来处理时间，以实现更精确的过期时间控制
读取 Cookie：
```
const value = Cookies.get('name');
```
如果 cookie 不存在，则返回 undefined。还可以获取所有可见的 cookie：
```
const allCookies = Cookies.get();
```
3.删除 Cookie：
```
Cookies.remove('name');
```
如果要删除指定路径的 cookie，需要提供相应的路径参数：
```
Cookies.remove('name', { path: '' });
```
4.设置默认属性：使用 Cookies.withAttributes 方法可以设置默认属性，如路径、域等：
```
Cookies.withAttributes({ path: '/', domain: '.example.com' });
```
5.Cookie 属性：
- expires：设置过期时间，可以是天数或 Date 对象。
- path：设置 cookie 的路径，默认为 '/'。
- domain：设置 cookie 的域，默认为当前请求的地址。
- secure：设置 cookie 是否仅通过 HTTPS 发送，默认为 false。
- httpOnly：设置 cookie 是否仅通过 HTTP(S) 发送，不提供给客户端 JavaScript，默认为 true。
- sameSite：设置 cookie 的同站策略，可以是 'strict'、'lax' 或 true（映射到 'strict'）。

安装

可以通过 npm 或直接在 HTML 文件中引入 js-cookie：

npm 安装：

npm install js-cookie

示例代码

以下是使用 js-cookie 的一个完整示例：

import Cookies from 'js-cookie';// 设置 cookie
Cookies.set('username', 'tanggaowei', { expires: 10, path: '' });// 读取 cookie
const username = Cookies.get('username');
console.log(username);// 删除 cookie
Cookies.remove('username');

通过使用 js-cookie，可以方便地在前端进行数据缓存和用户状态管理，同时避免了直接操作 document.cookie 的复杂性。

查看全文

http://www.dtcms.com/a/265891.html