当前位置：首页 > VUE

vue实现cookie

2026-03-07 07:10:21VUE

Vue 中实现 Cookie 操作

在 Vue 项目中操作 Cookie 可以通过原生 JavaScript 或第三方库实现。以下是几种常见方法：

使用原生 JavaScript 操作 Cookie

原生 JavaScript 提供了 document.cookie API 来读写 Cookie。

设置 Cookie

document.cookie = 'username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/';

username=John Doe 是 Cookie 的键值对。
expires 设置过期时间。
path 指定 Cookie 的作用路径。

读取 Cookie

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
console.log(getCookie('username')); // 输出 "John Doe"

删除 Cookie

vue实现cookie

document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

使用 js-cookie 库

js-cookie 是一个轻量级的库，简化了 Cookie 操作。

安装

npm install js-cookie

引入并使用

vue实现cookie

import Cookies from 'js-cookie';

// 设置 Cookie
Cookies.set('username', 'John Doe', { expires: 7, path: '/' });

// 读取 Cookie
const username = Cookies.get('username');
console.log(username); // 输出 "John Doe"

// 删除 Cookie
Cookies.remove('username', { path: '/' });

在 Vue 组件中使用

将 Cookie 操作封装为 Vue 插件或直接在组件中使用。

封装为插件

// plugins/cookie.js
import Cookies from 'js-cookie';

export default {
  install(Vue) {
    Vue.prototype.$cookies = Cookies;
  }
};

在 main.js 中注册

import Vue from 'vue';
import cookiePlugin from './plugins/cookie';

Vue.use(cookiePlugin);

在组件中使用

export default {
  methods: {
    setUserCookie() {
      this.$cookies.set('user', 'Jane Doe', { expires: 1 });
    },
    getUserCookie() {
      return this.$cookies.get('user');
    }
  }
};