vue设置cookie的方法封装

本文详细介绍了如何在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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值