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

 更新时间:2022年10月24日 17:17:41   作者:忍法阡陌  
这篇文章主要介绍了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 动态加载并注册组件且通过 render动态创建该组件

    详解vue 动态加载并注册组件且通过 render动态创建该组件

    这篇文章主要介绍了vue 动态加载并注册组件且通过 render动态创建该组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue中的数据监听和数据交互案例解析

    Vue中的数据监听和数据交互案例解析

    这篇文章主要介绍了Vue中的数据监听和数据交互案例解析,在文章开头部分先给大家介绍了vue中的数据监听事件$watch,具体代码讲解,大家可以参考下本文
    2017-07-07
  • vue3+pinia用户信息持久缓存token的问题解决

    vue3+pinia用户信息持久缓存token的问题解决

    本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vuex学习进阶篇之getters的使用教程

    vuex学习进阶篇之getters的使用教程

    getters用于获取state里的数据,它类似于计算属性,如果要获取的数据并没有发生变化的话,就会返回缓存的数据,下面这篇文章主要给大家介绍了关于vuex学习进阶篇之getters的使用教程,需要的朋友可以参考下
    2022-10-10
  • jeecgboot-vue3查询区label文字居左实现过程解析

    jeecgboot-vue3查询区label文字居左实现过程解析

    这篇文章主要为大家介绍了jeecgboot-vue3查询区label文字居左实现过程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-08-08
  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    Webpack+Vue如何导入Jquery和Jquery的第三方插件

    本文主要介绍了Webpack+Vue导入Jquery和Jquery的第三方插件的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Vue3实现HTML内容预览功能

    Vue3实现HTML内容预览功能

    这篇文章主要为大家详细介绍了如何使用Vue3实现HTML内容预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • vite + electron-builder 打包配置详解

    vite + electron-builder 打包配置详解

    这篇文章主要为大家介绍了electron基于vite + electron-builder 打包配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue状态机的开启与停止操作详细讲解

    Vue状态机的开启与停止操作详细讲解

    Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue打包并部署到nginx上的实现示例

    vue打包并部署到nginx上的实现示例

    本文主要介绍了vue打包并部署到nginx上的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01

最新评论