Vue项目使用Cookie，以Json格式存入与读取Cookie，设置过期时间以及删除操作

前端项目开发时，常常需要很多小技巧，比如使用Cookie巧妙实现某个效果。此次就以Vue项目记录一下如何使用Cookie。

cookie.js

/**
 * 写入cookie
 * @param {*} name 
 * @param {*} value 
 * @param {*} time 
 */
function setCookie(name, value, time) {
   
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec * 1);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

/**
 * 设置过期时间
 * @param {*} str 
 * @returns 
 */
function getsec(str) {
   
    var str1 = str.substring(1, str.length) * 1;
    var str2 = str.substring(0, 1);
    if (str2 == "s") {
   
        return str1 * 1000;
    } else if (str2 == "h") {
   
        return str1 * 60 * 60 * 1000;
    } else if (str2 == "d") {
   
        return str1 * 24 * 60 * 60 * 1000;
    }
}
/**
 * 读取cookie
 * @param {*} name 
 * @returns 
 */
function getCookie(name) {
   
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}


/**
 * 删除cookie
 * @param {*} name 
 */
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();
}

export {
   
    setCookie,
    getCookie,
    delCookie  
}

引用Cookie的文件，如index.vue

import {
   
  setCookie,
  getCookie,
  delCookie
} from '../utils/cookie';

methods: {
   
    setValToCookie() {
   
        let target_json = {
   };
        target_json['username'] = "Vegeta";
        setCookie("target_json", JSON.stringify(target_json), "s10");// 设置该cookie的键值以及10秒的过期时间
    },

    getValToCookie() {
   
        let target_str = getCookie("target_json")
        console.log("target_str =>", target_str)
        if(target_str != null) {
   
            let target_json = JSON.parse(target_str)
                if(target_json.username == 'Vegeta') {
   
                    // Todo
                    delCookie("target_json")// 删除该Cookie
              }
        }
    }
}