返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中如何设置全局的cookie对象
  • 182
分享到

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

Vue设置cookie对象设置全局cookie对象Vue cookie对象 2022-11-13 18:11:30 182人浏览 安东尼
摘要

目录Vue设置全局的cookie对象封装方法Vue中cookie的使用遇到的问题  解决问题Vue设置全局的cookie对象封装方法 在global.js中加入:

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’了你获取和删除也要都用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
    }
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue中如何设置全局的cookie对象

本文链接: https://lsjlt.com/news/170054.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中如何设置全局的cookie对象
    目录Vue设置全局的cookie对象封装方法Vue中cookie的使用遇到的问题  解决问题Vue设置全局的cookie对象封装方法 在global.js中加入:...
    99+
    2022-11-13
    Vue设置cookie对象 设置全局cookie对象 Vue cookie对象
  • Vue中怎么设置全局的cookie对象
    这篇文章主要介绍了Vue中怎么设置全局的cookie对象的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中怎么设置全局的cookie对象文章都会有所收获,下面我们一起来看看吧。Vue设置全局的cookie对...
    99+
    2023-07-04
  • Node.js 中全局对象如何使用
    这篇文章将为大家详细讲解有关Node.js 中全局对象如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Node.js 基础教程之全局对象在浏览器 Ja...
    99+
    2024-04-02
  • 在vue-test-utils中mock全局对象怎么用
    小编给大家分享一下在vue-test-utils中mock全局对象怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vue-t...
    99+
    2024-04-02
  • MySQL中如何设置全局变量
    这篇文章将为大家详细讲解有关MySQL中如何设置全局变量,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 ERROR 1418 (HY000): This ...
    99+
    2024-04-02
  • Node.js中的全局对象是什么
    这篇文章将为大家详细讲解有关Node.js中的全局对象是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。所谓全局对象,就是可以直接访问的对象,比如浏览器中的的全局对象就...
    99+
    2024-04-02
  • nodejs中的全局对象是什么
    本篇内容介绍了“nodejs中的全局对象是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Node.js...
    99+
    2024-04-02
  • vue工程全局如何设置ajax的等待动效
    小编给大家分享一下vue工程全局如何设置ajax的等待动效,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!实现等待动效在element-ui中,提供了两个方法进行调用loading组件,一个...
    99+
    2024-04-02
  • jQuery如何设置全局动画设置?
    这篇文章将为大家详细讲解有关jQuery如何设置全局动画设置?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jQuery 提供了 $.fx.speeds 对象,用于设置全局动画设置。该对象包含以下属性...
    99+
    2024-04-02
  • 如何在Mybatis中设置全局变量
    这期内容当中小编将会给大家带来有关如何在Mybatis中设置全局变量,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。mybatis可以设置全局变量,可以用于数据库类型的标示,比如:dbType=oracle...
    99+
    2023-05-31
    mybatis 全局变量 中设置
  • SocksCap64全局代理如何设置
    要设置SocksCap64全局代理,按照以下步骤操作:1. 下载并安装SocksCap64软件。2. 打开SocksCap64,在主...
    99+
    2023-08-23
    SocksCap64
  • vue中怎么设置全局变量或数据
    这期内容当中小编将会给大家带来有关vue中怎么设置全局变量或数据,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。实例如下:const MyPlugin ...
    99+
    2024-04-02
  • vue3.0如何在全局挂载对象和方法
    目录如何在全局挂载对象和方法1.官方的说明2.更新后的挂载方法3.在全局使用4.但是应用中的this对象已经不再是一个Vue对象了vue3全局挂载和使用如何在全局挂载对象和方法 1....
    99+
    2024-04-02
  • Vue项目如何设置反向代理和cookie设置问题
    目录Vue设置反向代理和cookie设置项目场景问题描述原因分析解决方案Vue项目使用js-cookie细则什么是js-cookie在项目中进行安装在项目中的入口文件(main.js...
    99+
    2024-04-02
  • 电脑如何设置全局代理
    设置全局代理的方法因操作系统不同而有所不同,下面分别介绍 Windows 和 Mac 系统的设置方法。 Windows 系统: 打开 Internet 属性。点击“连接”标签,再点击“局域网设置”。在弹出的窗口中,选择“使用代理服务...
    99+
    2023-10-25
    网络 服务器 运维
  • uniapp中如何设置全局页面背景色
    这篇“uniapp中如何设置全局页面背景色”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“uniapp中如何设置全局页面背景色...
    99+
    2023-07-05
  • vue中如何定义全局方法
    在vue中定义全局方法的方法:1.利用全局混入mixin定义;2.通过prototype挂载定义;3.使用Plugin方法定义;4.直接在vue文件中定义;具体方法如下:利用全局混入mixin定义全局方法Vue.mixin(mixin)ne...
    99+
    2024-04-02
  • 在vue项目中设置一些全局的公共样式
    目录vue设置全局的公共样式思路vue公共样式与公共方法问题描述公共样式公共方法vue设置全局的公共样式 本公司开发的产品,在运维去客户哪里上线的时候,客户可能会对产品主页面的一些色...
    99+
    2024-04-02
  • Vue中的全局守卫怎么配置
    这篇文章主要介绍了Vue中的全局守卫怎么配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的全局守卫怎么配置文章都会有所收获,下面我们一起来看看吧。全局守卫在main.js中进行配置:import&nb...
    99+
    2023-07-05
  • linux如何设置脚本全局生效
    要使脚本在 Linux 中全局生效,您可以按照以下步骤操作:1. 将脚本复制到一个标准路径下,例如 `/usr/local/bin/...
    99+
    2023-09-15
    linux
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作