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才行。

遇到的問題  

我曾才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對象”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。