vue设置cookie的方法封装

最新推荐文章于 2025-05-30 09:20:55 发布

原创最新推荐文章于 2025-05-30 09:20:55 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 3 个专栏收录

16 篇文章

订阅专栏

vue学习

15 篇文章

订阅专栏

vue学习

14 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中实现Cookie的设置、获取及删除功能。通过将这些功能封装成common.js模块，并将其挂载到Vue原型上，使得整个项目可以方便地进行全局调用。文章展示了具体的代码实现，包括设置Cookie时的有效期设定、获取特定Cookie值的方法以及如何删除指定的Cookie。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

common.js

//设置cookie,增加到vue实例方便全局调用
  setCookie:(c_name, value, expiredays) => {
		var exdate = new Date();
		exdate.setDate(exdate.getDate() + expiredays);
		document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
	},
	
//获取cookie、
  getCookie: name => {
		var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
		if (arr = document.cookie.match(reg))
			return (arr[2]);
		else
			return null;
	},
	
//删除cookie
  delCookie: name => {
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cval = getCookie(name);
		if (cval != null)
		 document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
	}

main.js中引入，挂载到vue原型上

import common from '../static/js/common'
Vue.prototype.common = common

组件中引用

 this.common.setCookie("token",'111111111111');//缓存token
 console.log('获取cookie',this.common.getCookie("token"));//获取缓存的token