Vue中怎么设置全局的cookie对象

这篇文章主要介绍了Vue中怎么设置全局的cookie对象的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中怎么设置全局的cookie对象文章都会有所收获，下面我们一起来看看吧。

Vue设置全局的cookie对象封装方法

在global.js中加入：

varcookie={set:function(key,val,time){//设置cookie方法vardate=newDate();//获取当前时间varexpiresDays=time;//将date设置为n天以后的时间date.setTime(date.getTime()+expiresDays*24*3600*1000);//格式化为cookie识别的时间document.cookie=key+"="+val+";expires="+date.toGMTString();//设置cookie},get:function(key){//获取cookie方法/*获取cookie参数*/vargetCookie=document.cookie.replace(/[]/g,"$");//获取cookie，并且将获得的cookie格式化，去掉空格字符，换成$getCookie=getCookie.replace(/[;$]/g,";");vararrCookie=getCookie.split(";")//将获得的cookie以"分号"为标识将cookie保存到arrCookie的数组中vartips;//声明变量tips//console.info(arrCookie);for(vari=0;i<arrCookie.length;i++){//使用for循环查找cookie中的tips变量vararr=arrCookie[i].split("=");//将单条cookie用"等号"为标识，将单条cookie保存为arr数组//console.info("getkey=",key,"arr[0]=",arr[0]);if(key==arr[0]){//匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作tips=arr[1];//将cookie的值赋给变量tipsbreak;//终止for循环遍历}}if(tips){tips=tips.replace(/[$]/g,"");//还原空格字符串}//console.info("getkey=",key,"value=",tips);returntips;},delete:function(key){//删除cookie方法vardate=newDate();//获取当前时间date.setTime(date.getTime()-10000);//将date设置为过去的时间document.cookie=key+"=v;expires="+date.toGMTString();//设置cookie},setArray:function(key,val,time){if(val){val=val.join('-*-');}//console.info("setArray",this)this.set(key,val,time);},getArray:function(key){vararrayStr=document.cookie.replace(/[]/g,"$");arrayStr=arrayStr.replace(/[;$]/g,";");//console.info("arrayStr",arrayStr)vararrCookie=arrayStr.split(";")vartips;//声明变量数组tipsfor(vari=0;i<arrCookie.length;i++){//使用for循环查找cookie中的tips变量vararr=arrCookie[i].split("=");//将单条cookie用"等号"为标识，将单条cookie保存为arr数组//console.info('arrCookie',key==arr[0],arr[0])if(key==arr[0]){//匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作tips=arr[1];//将cookie的值赋给变量tipsif(tips){tips=tips.replace(/[$]/g,"");//还原空格字符串}tips=tips.split("-*-");break;//终止for循环遍历}}returntips;}}exportdefault{cookie,}

在main.js中加入

importGlobalfrom"./utils/global.js";//根据实际路径调整，我这里是utils目录下

使用

data(){return{selectedItems=[1,2,3,4]}}methods:{addItems(){this.$Global.cookie.set("status",true);this.$Global.cookie.setArray('selectedItems',this.selectedItems,24);}，show(){this.$Global.cookie.get("status");this.$Global.cookie.getArray('selectedItems');}}

小结：

cookie是document自带的全局对象，是字符串对象。

数组要存在cookie中需要先转为字符串，否则，直接set会直接调用Object.tostring方法，会将“[object]”作为字符串存入

Vue中cookie的使用

cookie的使用说起来非常的简单，不就是传入（设置）cookie，获取cookie值，删除cookie吗，说真的其实真的没有那么难，来咱们先来把设置cookie，获取cookie，删除cookie的方法进行一下封装，说白了就是给他放到一个单独的js内，方便我们去调用，这段代码也可以去网上去找找，都大同小异

//获取cookie、exportfunctiongetCookie(name){vararr,reg=newRegExp("(^|)"+name+"=([^;]*)(;|$)");if(arr=document.cookie.match(reg))return(arr[2]);elsereturnnull;}//设置cookie,增加到vue实例方便全局调用exportfunctionsetCookie(c_name,value,expiredays){varexdate=newDate();exdate.setDate(exdate.getDate()+expiredays);document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());};//删除cookieexportfunctiondelCookie(name){varexp=newDate();exp.setTime(exp.getTime()-1);varcval=getCookie(name);if(cval!=null)document.cookie=name+"="+cval+";expires="+exp.toGMTString();};

接下来就是调用了，你可以在main.js内进行一下全局掉用，也可以在你使用的组件内来进行调用它，我这里就是在父组件内进行的调用

<script>importVuefrom'vue'import{setCookie,getCookie,delCookie}from'./util/util.js';//参数因为是三个方法，所以用大括号来进行调用了，路径一定要写对exportdefault{name:'App',beforeMount(){Vue.prototype.$cookieStore={setCookie,getCookie,delCookie}}}</script>

开始 的时候要先进行传入cookie值传的方法，看代码

this.$cookieStore.setCookie('name',this.ruleForm2.name)//‘name'是你自己取得名字，后面的this.ruleForm2.name是我写的一个input内v-model的值

最后在页面里进行使用获取的时候，可能就有很多人就像我一样懵了不知道应该怎么调用了，其实只需要放上一句话就行，看代码

this.$cookieStore.getCookie('name')

删除也是一样

this.$cookieStore.delCookie('name');

注意的是，那个name名字是不能取不一样的啊，当你传入了你获取和删除也要都用name才行。

遇到的问题

我曾才main.js内这样引用过，当时也确实成功了，能够正常的传值获取值，但获取cookie值的时候，进入页面获取成功，能够正常打印和使用，但是当你点击刷新页面的时候他的获取功能就是去了作用，返回的值就是undefined,会出现报错，

import{setCookie,getCookie,delCookie}from'./util/util.js';Vue.prototype.$cookieStore={setCookie,getCookie,delCookie}

解决问题

当时感觉应该是生命周期那运行的时候出现了问题，开始的时候，生命周期进行正常的运行，当你在页面进行刷新，生命周期出现断层导致getcookie没办法运行，

beforeMount(){//以前正常运行的时候是mounted，往上走了一级就行了Vue.prototype.$cookieStore={setCookie,getCookie,delCookie}}

关于“Vue中怎么设置全局的cookie对象”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中怎么设置全局的cookie对象”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：vue常用的跨域处理方式是什么

下一篇：wpsvba如何批量生成word

---