Vue中如何設(shè)置全局的cookie對象
更新時間：2022年10月24日 17:17:41 作者：忍法阡陌
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue設(shè)置全局的cookie對象封裝方法
在global.js中加入：
var cookie = {
?? ?set: function(key, val, time) { //設(shè)置cookie方法
?? ??? ?var date = new Date(); //獲取當(dāng)前時間
?? ??? ?var expiresDays = time; //將date設(shè)置為n天以后的時間
?? ??? ?date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); //格式化為cookie識別的時間
?? ??? ?document.cookie = key + "=" + val + ";expires=" + date.toGMTString(); //設(shè)置cookie
?? ?},
?? ?get: function(key) { //獲取cookie方法
?? ??? ?/*獲取cookie參數(shù)*/
?? ??? ?var getCookie = document.cookie.replace(/[ ]/g, "$"); //獲取cookie，并且將獲得的cookie格式化，去掉空格字符，換成$
?? ??? ?getCookie = getCookie.replace(/[;$]/g, ";");
?? ??? ?var arrCookie = getCookie.split(";") //將獲得的cookie以"分號"為標識 將cookie保存到arrCookie的數(shù)組中
?? ??? ?var tips; //聲明變量tips
?? ??? ?// console.info(arrCookie);
?? ??? ?for (var i = 0; i < arrCookie.length; i++) { //使用for循環(huán)查找cookie中的tips變量
?? ??? ??? ?var arr = arrCookie[i].split("="); //將單條cookie用"等號"為標識，將單條cookie保存為arr數(shù)組
?? ??? ??? ?// console.info("get key=",key,"arr[0]=",arr[0]);
?? ??? ??? ?if (key == arr[0]) { //匹配變量名稱，其中arr[0]是指的cookie名稱，如果該條變量為tips則執(zhí)行判斷語句中的賦值操作
?? ??? ??? ??? ?tips = arr[1]; //將cookie的值賦給變量tips
?? ??? ??? ??? ?break; //終止for循環(huán)遍歷
?? ??? ??? ?}
?? ??? ?}
?? ??? ?if (tips) {
?? ??? ??? ?tips = tips.replace(/[$]/g, " "); //還原空格字符串
?? ??? ?}
?? ??? ?// console.info("get key=",key,"value=",tips);
?? ??? ?return tips;
?? ?},
?? ?delete: function(key) { //刪除cookie方法
?? ??? ?var date = new Date(); //獲取當(dāng)前時間
?? ??? ?date.setTime(date.getTime() - 10000); //將date設(shè)置為過去的時間
?? ??? ?document.cookie = key + "=v; expires =" + date.toGMTString(); //設(shè)置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; //聲明變量數(shù)組tips
?? ??? ?
?? ??? ?for (var i = 0; i < arrCookie.length; i++) { //使用for循環(huán)查找cookie中的tips變量
?? ??? ??? ?var arr = arrCookie[i].split("="); //將單條cookie用"等號"為標識，將單條cookie保存為arr數(shù)組
?? ??? ??? ?// console.info('arrCookie',key == arr[0],arr[0])
?? ??? ??? ?if (key == arr[0]) { //匹配變量名稱，其中arr[0]是指的cookie名稱，如果該條變量為tips則執(zhí)行判斷語句中的賦值操作
?? ??? ??? ??? ?tips = arr[1]; //將cookie的值賦給變量tips
?? ??? ??? ??? ?if (tips) {
?? ??? ??? ??? ??? ?tips = tips.replace(/[$]/g, " "); //還原空格字符串
?? ??? ??? ??? ?}
?? ??? ??? ??? ?tips = tips.split("-*-");
?? ??? ??? ??? ?break; //終止for循環(huán)遍歷
?? ??? ??? ?}
?? ??? ?}
?? ??? ?return tips;
?? ?}
}
export default {
?? ?cookie,
}在main.js中加入
import Global from "./utils/global.js";//根據(jù)實際路徑調(diào)整，我這里是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');
?? ?}
}小結(jié)：
cookie是document自帶的全局對象，是字符串對象。
數(shù)組要存在cookie中需要先轉(zhuǎn)為字符串，否則，直接set會直接調(diào)用Object.tostring方法，會將“[object]”作為字符串存入
Vue中cookie的使用
cookie的使用說起來非常的簡單，不就是傳入（設(shè)置）cookie，獲取cookie值，刪除cookie嗎，說真的其實真的沒有那么難，來咱們先來把設(shè)置cookie，獲取cookie，刪除cookie的方法進行一下封裝，說白了就是給他放到一個單獨的js內(nèi)，方便我們?nèi)フ{(diào)用，這段代碼也可以去網(wǎng)上去找找，都大同小異
//獲取cookie、
export function getCookie(name) {
? ? var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
? ? if (arr = document.cookie.match(reg))
? ? ? return (arr[2]);
? ? else
? ? ? return null;
? }
??
? //設(shè)置cookie,增加到vue實例方便全局調(diào)用
? 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();
? };接下來就是調(diào)用了，你可以在main.js內(nèi)進行一下全局掉用，也可以在你使用的組件內(nèi)來進行調(diào)用它，我這里就是在父組件內(nèi)進行的調(diào)用
<script>
import Vue from 'vue'
import {setCookie, getCookie, delCookie} from './util/util.js';
//參數(shù)因為是三個方法，所以用大括號來進行調(diào)用了，路徑一定要寫對
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內(nèi)v-model的值
最后在頁面里進行使用獲取的時候，可能就有很多人就像我一樣懵了不知道應(yīng)該怎么調(diào)用了，其實只需要放上一句話就行，看代碼
this.$cookieStore.getCookie( 'name')
刪除也是一樣
this.$cookieStore.delCookie( 'name');
注意的是，那個name名字是不能取不一樣的啊，當(dāng)你傳入‘name’了你獲取和刪除也要都用name才行
遇到的問題
我曾才main.js內(nèi)這樣引用過，當(dāng)時也確實成功了，能夠正常的傳值獲取值，但獲取cookie值的時候，進入頁面獲取成功，能夠正常打印和使用，但是當(dāng)你點擊刷新頁面的時候他的獲取功能就是去了作用，返回的值就是undefined,會出現(xiàn)報錯，
import {setCookie, getCookie, delCookie} from './util/util.js';
Vue.prototype.$cookieStore = {
? setCookie,
? getCookie,
? delCookie
}解決問題
當(dāng)時感覺應(yīng)該是生命周期那運行的時候出現(xiàn)了問題，開始的時候，生命周期進行正常的運行，當(dāng)你在頁面進行刷新，生命周期出現(xiàn)斷層導(dǎo)致getcookie沒辦法運行，
?beforeMount () {//以前正常運行的時候是mounted，往上走了一級就行了
? ? Vue.prototype.$cookieStore = {
? ? ? setCookie,
? ? ? getCookie,
? ? ? delCookie
? ? }
? }以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析,在文章開頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽事件$watch，具體代碼講解，大家可以參考下本文2017-07-07
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vuex學(xué)習(xí)進階篇之getters的使用教程
getters用于獲取state里的數(shù)據(jù),它類似于計算屬性,如果要獲取的數(shù)據(jù)并沒有發(fā)生變化的話,就會返回緩存的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vuex學(xué)習(xí)進階篇之getters的使用教程,需要的朋友可以參考下2022-10-10
jeecgboot-vue3查詢區(qū)label文字居左實現(xiàn)過程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實現(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-08-08
Webpack+Vue如何導(dǎo)入Jquery和Jquery的第三方插件
本文主要介紹了Webpack+Vue導(dǎo)入Jquery和Jquery的第三方插件的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Vue3實現(xiàn)HTML內(nèi)容預(yù)覽功能
這篇文章主要為大家詳細介紹了如何使用Vue3實現(xiàn)HTML內(nèi)容預(yù)覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
vite?+?electron-builder?打包配置詳解
這篇文章主要為大家介紹了electron基于vite?+?electron-builder?打包配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機快速了解與實例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
本文主要介紹了vue打包并部署到nginx上的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01