typescript 封装一个Cookie工具类

前言

之前用ts封装过一个处理本地缓存localStorage和sessionStorage的类，这次在做一些落地页的时候，对接了Facebook的像素打点，其中需要获取到像素生成的fbc和fbp参数，用于渠道统计，但是这两个参数我看了下，像素方法fbq并没有提供专门获取的方式，所以只能自己手动获取了。

但是大家都知道，cookie的获取是很麻烦的，因为通过document.cookie获取的是一个所有cookie的字符串值，我们需要一个个拆分获取。

如果是拿一个数据还好说，但是拿两个如果不封装的话就显得代码重复了，于是封装了一个对应的类。

首先api保持和之前的一致，都是采用getItem这种Storage的接口，同时还支持key增加统一前缀。

然后就是功能，由于现在cookie用的很少，所以这里只做string和number两种类型的值处理。

不多说，直接上代码：

封装

创建 cookieStorage.ts 文件：

/** 配置 */
interface Options {
    /** key前缀 */
    prefix?: string;
}
/** 默认配置 */
const defaultOptions: Options = {
    prefix: ""
};

class CookieStorage {
    private prefix: string;

    constructor(options: Options = defaultOptions) {
        const { prefix } = options;
        this.prefix = prefix ?? "";
    }

    /**
     * @description: 设置cookie
     * @param {string} key 键
     * @param {any} value 值
     * @param {number} expires 过期时间s毫秒，不传默认2年有效
     * @Date: 2023-05-17 18:10:34
     * @Author: mulingyuer
     */
    public setItem(key: string, value: string | number, expires?: number): void {
        const timestamp = Date.now();
        if (typeof expires === "number") {
            expires = timestamp + expires;
        } else {
            expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
        }
        document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
    }

    /**
     * @description: 获取cookie
     * @param {string} key 键
     * @Date: 2023-05-17 18:31:50
     * @Author: mulingyuer
     */
    public getItem(key: string): string | undefined {
        const cookies = document.cookie.split("; ");
        let val: string | undefined = undefined;
        cookies.find((item) => {
            const [k, v] = item.split("=");
            if (k  ===  `${this.prefix}${key}`) {
                val = v;
                return true;
            }
            return false;
        });

        return val;
    }

    /**
     * @description: 删除指定key的cookie
     * @param {string} key 键
     * @Date: 2023-05-17 18:32:56
     * @Author: mulingyuer
     */
    public removeItem(key: string): void {
        this.setItem(key, "", -1);
    }

    /**
     * @description: 清空所有cookie
     * @Date: 2023-05-17 23:13:04
     * @Author: mulingyuer
     */
    public clear(): void {
        const cookies = document.cookie.split("; ");
        cookies.forEach((item) => {
            const [k] = item.split("=");
            this.removeItem(k);
        });
    }
}

const cookieStorage = new CookieStorage();

export default cookieStorage;
export { CookieStorage };

使用的时候：

import cookieStorage from "@/utils/cookieStorage";

const fbp = cookieStorage.getItem("_fbp");

获取的值有可能是undefined，所以记得做判空处理，让代码更加健壮。