教你封装cookie操作，简便你的操作

在封装之前，最好自己去试试cookie常见操作有哪些，这里我就不去尝试了。

Typescript版本

getCookie

封装这个之前我们先来看一下cookie得结构：

"uuid_tt_dd=10_17080957850-1567180715184-786880; dc_session_id=10_1567180715184.873382; Hm_ct_6bcd52f51e9b3dce32bec4a3997715ac=6525*1*10_17080957850-1567180715184-786880!5744*1*qq_40566547!1788*1*PC_VC; UserName=qq_40566547; UserNick=qq_40566547; AU=965; UN=qq_40566547; BT=1567216422889; p_uid=U000000; smidV2=20190904135245e8e0bb6e262ab3862a1b9723d3938df70074681d9072ff8d0; Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac=1568691441,1568691528,1568693320,1568768940; Hm_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1568768945; dc_tos=py066g"

从上面得字符串中，我们可以得出结论：每个cookie以"; "（;空格）隔开，每个cookie内部是个key-value形式。所以我们很容易写出以下代码。

function getCookie(key: string): string {
    let cookies: string = document.cookie;
    // 以'; '拆分字符串为一个数组
    let arrCookies: string[] = cookies.split("; ");
    let len = arrCookies.length;
    for (let i = 0; i < len; i++) {
    	// 每个cookie以=拆分成一个[key,value]的数组
        let arr: string[] = arrCookies[i].split('=');
        if (arr[0] === key) {
            return arr[1]
        }
    }
    return ''
}

setCookie

首先我们得明白，setCookie时我们该怎么设置，可以传的参数有哪些。

1. setCookie()，无参数
2. setCookie("key")，一个参数该参数是字符串
3. setCookie({key: "xxx", value: "xxx", // expires: time})，一个参数该参数是对象
4. setCookie("key", "value")，两个参数（key，value）
5. setCookie("key", "value", "expires")，三个参数（key，value，过期时间）

以上就是常用的cookie相关操作的封装API。接下来我们先来书写设置过期时间的方法

过期时间

// delay是个number，即多少天后过期，返回一个GMT时间格式的字符串
function expireTime(delay: number): string {
    let now: Date = new Date();
    now.setDate(now.getDate() + delay);
    return (now as any).toGMTString()
}

接下来的是重头戏，setCookie的相关操作

setCookie的封装

这里运用Typescript的重载机制，即同样的函数名不同的参数

// 定义Cookie接口
interface Cookie{
    key: string
    value: any,
    expires?: number,
}
function setCookie(): void;

function setCookie(key: string): void;

function setCookie(key: string, value: string): void;

function setCookie(key: string, value: string, expires: number): void;

function setCookie(cookie: Index): void;

function setCookie(...arg: any) {
	// 没有参数的情况
    if (arg.length === 0) {
        document.cookie = ''
    // 一个参数的情况
    } else if (arg.length === 1) {
    		// 该参数是个字符串的情况
        if (typeof arg[0] === 'string') {
            document.cookie = arg
        } else {
        	// 该参数是个对象的情况
            let cookieObj: Cookie = arg[0];
            if (cookieObj.expires === undefined) {
            	// 这里就体现到了函数重载的方便
                setCookie(cookieObj.key, cookieObj.value)
            } else {
                setCookie(cookieObj.key, cookieObj.value, cookieObj.expires)
            }
        }
       // 两个参数的情况
    } else if (arg.length === 2) {
        document.cookie = `${arg[0]}=${arg[1]}`
        // 三个参数的情况
    } else if (arg.length === 3) {
        document.cookie = `${arg[0]}=${arg[1]};expires=${expireTime(arg[2])}`
    }
}

细枝末节的removeCookie

removeCookie就是将过期时间设置为过去的时间即可，这样cookie过期之后浏览器自动会删除cookie。

function removeCookie(key: string): void {
    let cookie: string = getCookie(key);
    setCookie(key, cookie, -1)
}

JavaScript版本

function expireTime(delay) {
    var now = new Date();
    now.setDate(now.getDate() + delay);
    return now.toGMTString();
}
function setCookie() {
    var arg = [];
    for (var i = 0; i < arguments.length; i++) {
        arg[i] = arguments[i];
    }
    if (arg.length === 0) {
        document.cookie = '';
    }
    else if (arg.length === 1) {
        if (typeof arg[0] === 'string') {
            document.cookie = arg;
        }
        else {
            var cookieObj = arg[0];
            if (cookieObj.expires === undefined) {
                setCookie(cookieObj.key, cookieObj.value);
            }
            else {
                setCookie(cookieObj.key, cookieObj.value, cookieObj.expires);
            }
        }
    }
    else if (arg.length === 2) {
        document.cookie = arg[0] + "=" + arg[1];
    }
    else if (arg.length === 3) {
        document.cookie = arg[0] + "=" + arg[1] + ";expires=" + expireTime(arg[2]);
    }
}
function getCookie(key) {
    var cookies = document.cookie;
    var arrCookies = cookies.split("; ");
    var len = arrCookies.length;
    for (var i = 0; i < len; i++) {
        var arr = arrCookies[i].split('=');
        if (arr[0] === key) {
            return arr[1];
        }
    }
    return '';
}
function removeCookie(key) {
    var cookie = getCookie(key);
    setCookie(key, cookie, -1);
}

在npm上我有发布自己的一个包，在vue/react的js和ts版本或者平常的node环境均可使用。多谢支持