vue实现cookie
Vue 中操作 Cookie 的方法
在 Vue 中操作 Cookie 可以通过原生 JavaScript 或第三方库实现。以下是几种常见方法：
原生 JavaScript 操作 Cookie
使用 document.cookie API 进行基础操作：
// 设置 Cookie
document.cookie = 'username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';
// 读取 Cookie
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
const [name, value] = cookie.trim().split('=');
return { ...acc, [name]: value };
}, {});
// 删除 Cookie（通过设置过期时间为过去）
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';使用 js-cookie 库
安装流行的 js-cookie 库简化操作：
npm install js-cookie基本使用方法：
import Cookies from 'js-cookie';
// 设置 Cookie
Cookies.set('token', 'abc123', { expires: 7 }); // 7天后过期
// 读取 Cookie
const token = Cookies.get('token');
// 删除 Cookie
Cookies.remove('token');Vue 全局封装
在 main.js 中全局挂载：
import Vue from 'vue';
import Cookies from 'js-cookie';
Vue.prototype.$cookies = Cookies;组件内使用：
this.$cookies.set('theme', 'dark');
const theme = this.$cookies.get('theme');注意事项
- 考虑安全性时设置
Secure和HttpOnly标志 - 敏感数据不建议存储在 Cookie 中
- 注意 Cookie 大小限制（通常 4KB 左右）
- 跨域场景需配置
domain和sameSite属性
对于需要更复杂状态管理的场景，建议结合 Vuex 或 Pinia 使用，将 Cookie 作为持久化存储的补充方案。
