Vue中如何设置全局的cookie对象

目录 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方法
?? ??? ?/*获取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’了你获取和删除也要都用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对象的详细内容...