一个插件 js-cookie

js-cookie是一个简单的，轻量级的处理cookies的js API。

js-cookie中文文档

js-cookie 源码： 

//js cookie 2.2的类型定义
//项目：https://github.com/js-cookie/js-cookie
//定义：Theodore Brown<https://github.com/theodorejb>
//弯曲机<https://github.com/BendingBender>
//安托万·莱佩<https://github.com/alepee>
//玉藤岛<https://github.com/yutod>
//尼古拉斯·雷尼斯<https://github.com/nreynis>
//定义：https://github.com/DefinitelyTyped/DefinitelyTyped
//TypeScript版本：2.3

declare namespace Cookies {
    interface CookieAttributes {
        /**
         * 定义何时删除cookie。值可以是数字
         * 这将被解释为天从时间创造或
         * 日期实例。如果省略，cookie将成为会话cookie。
         */
        expires?: number | Date;

        /**
         * 定义cookie可用的路径。默认为“/”
         */
        path?: string;

        /**
         * 定义cookie可用的域。默认为
         * 创建cookie的页面的域。
         */
        domain?: string;

        /**
         * 一个布尔值，指示cookie传输是否需要
         * 安全协议（https）。默认为false。
         */
        secure?: boolean;

        /**
         * 断言cookie不能与跨源请求一起发送，
         * 提供一些防止跨站点请求伪造的保护
         * 攻击（CSRF）
         */
        sameSite?: 'strict' | 'Strict' | 'lax' | 'Lax' | 'none' | 'None';

        /**
         * 一个将被序列化的属性，符合RFC6265第5.2条。
         */
        [property: string]: any;
    }

    interface CookiesStatic<T extends object = object> {
        /**
         * 允许访问、更改或重置默认cookie属性
         */
        defaults: CookieAttributes;

        /**
         * 创建一个 cookie
         */
        set(name: string, value: string | T, options?: CookieAttributes): string | undefined;

        /**
         * 读取一个 cookie
         */
        get(name: string): string | undefined;

        /**
         * 读取所有可用的 Cookie
         */
        get(): {[key: string]: string};

        /**
         * 返回字符串的解析表示形式
         * 根据JSON.parse文件
         */
        getJSON(name: string): any;

        /**
         * 返回的解析表示形式
         * 所有 cookies 根据 JSON.parse 文件
         */
        getJSON(): {[key: string]: any};

        /**
         *删除一条 cookie
         */
        remove(name: string, options?: CookieAttributes): void;

        /**
         * 如果存在与命名空间Cookies冲突的危险，
         * noConflict方法将允许您定义一个新的名称空间
         * 保留原来的那个。这在以下情况下特别有用
         * 在第三方网站上运行脚本，例如作为小部件的一部分
         * 或SDK。注：使用时不需要noConflict方法
         * AMD或CommonJS，因此不会暴露在这些环境中。
         */
        noConflict?(): CookiesStatic<T>;

        /**
         * 创建一个新的api实例来覆盖默认值
         * 解码实现。所有方法都依赖于适当的
         * 解码工作，例如Cookies.删除（）和Cookies.获取(),
         * 将首先为每个cookie运行转换器。他回来了
         * 字符串将用作cookie值。
         */
        withConverter<TConv extends object>(converter: CookieReadConverter | { write?: CookieWriteConverter<TConv>; read?: CookieReadConverter; }): CookiesStatic<TConv>;
    }

    type CookieWriteConverter<T extends object> = (value: string | T, name: string) => string;
    type CookieReadConverter = (value: string, name: string) => string;
}

declare const Cookies: Cookies.CookiesStatic;

export = Cookies;
export as namespace Cookies;

 

js-cookie 的使用，两种方式：

1、直接引用 cdn：<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

2、npm 安装：npm i js-cookie -D，然后引入 import Cookies from 'js-cookie'