这篇文章主要介绍了Vue中怎么设置全局的cookie对象的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中怎么设置全局的cookie对象文章都会有所收获,下面我们一起来看看吧。
Vue设置全局的cookie对象封装方法
在global.js中加入:
var cookie = { set: function(key, val, time) { //设置cookie方法 var date = new Date(); //获取当前时间 var expiresDays = time; //将date设置为n天以后的时间 date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); //格式化为cookie识别的时间 document.cookie = key + "=" + val + ";expires=" + date.toGMTString(); //设置cookie }, get: function(key) { //获取cookie方法 var getCookie = document.cookie.replace(/[ ]/g, "$"); //获取cookie,并且将获得的cookie格式化,去掉空格字符,换成$ getCookie = getCookie.replace(/[;$]/g, ";"); var arrCookie = getCookie.split(";") //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中 var tips; //声明变量tips // console.info(arrCookie); for (var i = 0; i < arrCookie.length; i++) { //使用for循环查找cookie中的tips变量 var arr = arrCookie[i].split("="); //将单条cookie用"等号"为标识,将单条cookie保存为arr数组 // console.info("get key=",key,"arr[0]=",arr[0]); if (key == arr[0]) { //匹配变量名称,其中arr[0]是指的cookie名称,如果该条变量为tips则执行判断语句中的赋值操作 tips = arr[1]; //将cookie的值赋给变量tips break; //终止for循环遍历 } } if (tips) { tips = tips.replace(/[$]/g, " "); //还原空格字符串 } // console.info("get key=",key,"value=",tips); return tips; }, delete: function(key) { //删除cookie方法 var date = new Date(); //获取当前时间 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) { var arrayStr = document.cookie.replace(/[ ]/g, "$"); arrayStr = arrayStr.replace(/[;$]/g, ";"); // console.info("arrayStr",arrayStr) var arrCookie = arrayStr.split(";") var tips; //声明变量数组tips for (var i = 0; i < arrCookie.length; i++) { //使用for循环查找cookie中的tips变量 var arr = 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的值赋给变量tips if (tips) { tips = tips.replace(/[$]/g, " "); //还原空格字符串 } tips = tips.split("-*-"); break; //终止for循环遍历 } } return tips; }}export default { cookie,}
在main.js中加入
import Global from "./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、export function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return (arr[2]); else return null; } //设置cookie,增加到vue实例方便全局调用 export function 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 export function 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内进行一下全局掉用,也可以在你使用的组件内来进行调用它,我这里就是在父组件内进行的调用
<script>import Vue from 'vue'import {setCookie, getCookie, delCookie} from './util/util.js';//参数因为是三个方法,所以用大括号来进行调用了,路径一定要写对export default { 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对象”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。