Vue 项目中cookie 设置 获取 删除

设置cookie

export function setCookie(key, value) {
    var exdate = new Date(); //获取时间
    exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 36500); //保存的天数，我这里写的是100年
    //字符串拼接cookie
    window.document.cookie = key + "=" + value + ";path=/;expires=" + exdate.toGMTString();
};

读取cookie

export function getCookie(param) {
    var c_param = '';
    if (document.cookie.length > 0) {
        var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('='); //再次切割
            //判断查找相对应的值
            if (arr2[0] == param) {
                c_param = arr2[1];
                //保存到保存数据的地方
            }
        }
        return c_param;
    }
};

function padLeftZero(str) {
    return ('00' + str).substr(str.length);
};

接下来就是调用了，你可以在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
  }
}