在实际项目应用中，当web服务器向浏览区发送网页数据后，链接关闭后，服务器会忘记用户的所有数据信息，为了解决如何记住用户信息和一些需要记录下来的数据，出现了cookie、localStorage和sessionStorage.这里简单介绍一下js-cookie插件使用。

js-cookie

js-cookie是一个简单、轻量级的用于处理cookie的JavaJavaScriptAPI；适用于所有的浏览器，可以接受任意字符，支持ES模块；插件比较小，大概800 bytes

install 安装

npm i js-cookie

在ES模块导入js-cookie使用

import Cookies from 'js-cookie'

创建cookie

创建一个能够有效的横跨整个网站的cookie

Cookies.set('acrossCookie','jsCookietest');

创建一个包含有效期的cookie，默认单位是天；js-cookie支持在过期属性中传递日期实例。由于Date实例可以指定任何时间，大大提高了灵活性。可以创建有效期小于一天的的cookie

- set方法支持的属性

expires(有效期)：如果传入number单位则为天，也可以传入一个Date对象，表示有效期至Date指定时间

path:string类型数据，表示cookie对那个地址可见。 默认为"/"

domain:string类型数据，表示cookie对那个域名可见。设置后cookie会对所有子域名可见。默认为对创建该cookie的域名和子域名可见。

secure:boolean类型，true/false，表示cookie传输是否仅支持https。默认为不要求协议必须为https

//创建一个有效期为3天的cookie
Cookies.set('threeDay','threeDay', { expires: 3});
//创建一个有效期为半天的cookie
Cookies.set('halfDay','halfDay', { expires: 0.5})
//使用Date实例创建有效期为10分钟的cookies
let tenMinutes = new Date(new Date().getTime() + 10 * 60 *1000);
Cookies.set('tenMinutes','tenMinutes', { expires: tenMinutes });
//创建一个1小时有效期的cookie,可以使用两种方式
//方式一 (1天24小时)
let oneHourFirst = 1/24;
Cookies.set('oneHourFirst', 'oneHourFirst', { expires: oneHourFirst });
//方式二 1小时60分钟
let oneHourSecond = new Date(new Date().getTime() + 60*60*1000)
Cookies.set('oneHourSecond', 'oneHourSecond', { expires: oneHourSecond });
//为当前页创建有效期为7天的cookie
Cookies.set('sevenDay','currentPage', {expires: 7, path: ''})
domain属性：表示Cookie可见的有效域的字符串，Cookie也将对所有子域可见
默认情况下：Cookie仅对创建Cookie的页面的域名和子域可见，ie浏览器除外
Cookies.set('sevenDay','currentPage', { domain: 'www.xxx.com' })
Cookies.get('sevenDay'); //undefined

获取Cookie值

获取指定key的值：Cookie.get(key);获取所有值：Cookie.get(); Cookie.get()无法获取指定域属性的值，需要在指定域下才能看到设置域属性的值

Cookies.set('acrossCookie','jsCookietest');
//获取指定key的cookie
console.log(Cookies.get('acrossCookie')); //jsCookietest
//当获取一个不存在的key时，返回undefined
console.log(Cookies.get('notKey'));//undefined
Cookies.set('allOne','first');
Cookies.set('allTwo','second');
//获取所有可用的cookies
Cookies.get();//{ allOne: "first", allTwo: "second", acrossCookie: "jsCookietest" }

删除值 Cookie.remove(key)

注意：当移除Cookie时，在Cookie值设置时路径和域名如果不依赖于默认属性时，则移除时必须要传递用于设置cookie时完全相同的路径和域属性

Cookie.set('deleteDefault',123);
//在不设置path路径时，默认路径为{path: '/'};可以直接根据key移除指定的值
Cookie.remove('deleteDefault'); //移除成功
Cookie.set('deleteLogin', 111111, {path: '/login'});
//设置path路径时，不能直接根据key值移除，需要在移除指定值时添加路径参数
Cookie.remove('deleteLogin'); //移除失败
Cookie.remove('deleteLogin', {path:'/login'})
批量移除key值：需要借助Cookie.get()方法，但是不能移除所有的，应为一些设置路径和域属性的key值可能不可见，所以在移除时无法将这些key值移除。
// 暂时未找到获取属性的方法，有知道的大佬可以在下方评论一下，谢谢~~~
Object.keys(Cookie.get()).forEach((cookieName) => {
    //let neededAttributes = {
        //设置属性值 path/domain等等
    //}
    //Cookies.remove(cookieName, neededAttributes);
    Cookies.remove(cookieName);

})

Cookie内存比较小，一般只用于存储一些登录信息

js-cookie｜8月更文挑战