vue中 js-cookie 用法
js-cookie
是一个用于在浏览器中处理Cookie的轻量级JavaScript库 ,在Vue3项目中使用它,可以方便地进行Cookie的读取、写入和删除操作。下面介绍具体的使用步骤:
1. 安装js-cookie
在Vue3项目的根目录下,通过npm或yarn安装js-cookie
:
- 使用npm
npm install js-cookie
- 使用yarn
yarn add js-cookie
2. 引入js-cookie
在需要使用js-cookie
的Vue组件或文件中,引入js-cookie
库:
import Cookies from 'js-cookie';
3. 写入Cookie
使用Cookies.set()
方法可以写入Cookie,该方法接受两个必填参数:Cookie的名称和值,还可以接受一个可选的配置对象来设置Cookie的属性,如过期时间、路径、域名等。
// 基本用法,设置一个名为 'username',值为 'John' 的Cookie
Cookies.set('username', 'John'); // 设置一个带有过期时间的Cookie,例如设置过期时间为7天
Cookies.set('token', 'abc123', { expires: 7 }); // 设置带有路径的Cookie,只有在指定路径及其子路径下的页面才能访问该Cookie
Cookies.set('userInfo', { name: 'Alice', age: 30 }, { path: '/profile' });
4. 读取Cookie
使用Cookies.get()
方法读取Cookie,该方法接受Cookie的名称作为参数,如果Cookie存在则返回其值,否则返回undefined
。
// 读取名为 'username' 的Cookie
const username = Cookies.get('username');
console.log(username); // 读取所有Cookie,返回一个包含所有Cookie键值对的对象
const allCookies = Cookies.get();
console.log(allCookies);
5. 删除Cookie
使用Cookies.remove()
方法删除Cookie,该方法接受Cookie的名称作为参数,同时如果设置Cookie时指定了路径、域名等属性,删除时也需要传入相同的属性配置,才能正确删除对应的Cookie。
// 删除名为 'username' 的Cookie
Cookies.remove('username'); // 删除带有路径的Cookie,需要传入相同的路径配置
Cookies.remove('userInfo', { path: '/profile' });
6. 在Vue3组件中使用示例
<template><div><button @click="setCookie">设置Cookie</button><button @click="getCookie">获取Cookie</button><button @click="removeCookie">删除Cookie</button><p v-if="cookieValue">{{ cookieValue }}</p></div>
</template><script setup>
import Cookies from 'js-cookie';
import { ref } from 'vue';const cookieValue = ref('');const setCookie = () => {Cookies.set('testCookie', 'Hello, js-cookie!', { expires: 1 });
};const getCookie = () => {const value = Cookies.get('testCookie');cookieValue.value = value || 'Cookie不存在';
};const removeCookie = () => {Cookies.remove('testCookie');cookieValue.value = 'Cookie已删除';
};
</script>
以上代码展示了在Vue3项目中如何使用js-cookie
进行Cookie的常见操作。通过合理运用js-cookie
,可以方便地管理应用中的Cookie数据,实现用户状态管理、个性化设置等功能。