Vue-CLI项目中cookie操作的两种实现方案
vue-cookie 方案
- 安装依赖
npm install vue-cookie --save
- 初始化配置
在项目入口文件中进行如下配置：
import cookie from 'vue-cookie'
Vue.prototype.$cookie = cookie;
- 基础操作
export default {
created() {
const authToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9';
// 设置cookie，第三个参数表示有效期（单位为天，必须为整数）
this.$cookie.set('authToken', authToken, 7);
},
mounted() {
const token = this.$cookie.get('authToken');
console.log('获取到的Token:', token);
},
beforeDestroy() {
// 删除指定cookie
this.$cookie.delete('authToken');
}
}
操作说明：
- 设置cookie：
this.$cookie.set('键名', 值, 有效期天数) - 读取cookie：
this.$cookie.get('键名') - 删除cookie：
this.$cookie.delete('键名')- 页面刷新后数据完全清除
vue-cookies 方案
- 安装依赖
npm install vue-cookies --save
- 初始化配置
在项目入口文件中进行如下配置：
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;
- 核心操作
基本语法：
- 设置：
this.$cookies.set('键名', 值) - 获取：
this.$cookies.get('键名') - 获取所有键：
this.$cookies.keys() - 删除：
this.$cookies.remove('键名') - 检查存在：
this.$cookies.isKey('键名')
- 全局过期时间配置
// 按时间单位配置
this.$cookies.config('7d'); // 7天
this.$cookies.config('24h'); // 24小时
this.$cookies.config('30min'); // 30分钟
this.$cookies.config('60s'); // 60秒
// 指定具体日期
this.$cookies.config(new Date(2025, 11, 31));
this.$cookies.config('Sat, 13 Mar 2025 12:25:57 GMT');
// 秒数配置
this.$cookies.config(3600); // 3600秒
this.$cookies.config(60 * 60); // 同样表示3600秒
- 单个Cookie配置
// 默认1天过期
this.$cookies.set('sessionId', 'abc123');
// 明确指定过期时间单位（不区分大小写）
this.$cookies.set('sessionId', 'abc123', '1d');
this.$cookies.set('sessionId', 'abc123', '1D');
// 按秒数设置
this.$cookies.set('sessionId', 'abc123', 60 * 60 * 24);
// 使用Date对象
this.$cookies.set('sessionId', 'abc123', new Date(2025, 3, 12));
// 使用时间字符串
this.$cookies.set('sessionId', 'abc123', 'Sat, 13 Mar 2025 12:25:57 GMT');
// 浏览器会话结束时过期
this.$cookies.set('tempData', 'value', '0');
// 永不过期
this.$cookies.set('permanentData', 'value', -1);
- 时间单位参考表
| 缩写 | 全称 |
|---|---|
| y | 年（year） |
| m | 月（month） |
| d | 天（day） |
| h | 小时（hour） |
| min | 分钟（minute） |
| s | 秒（second） |
以上两种方案均可满足Vue项目中的Cookie操作需求，建议根据具体业务场景选择合适的方案。
