js-cookie是一个简单且轻量级对cookie操作api的封装

为什么要使用js-cookie

因为自己用js原生的方式去操作cookie代码比较繁琐，例如cookie的获取、设置、删除，原生js操作

// 设置cookie
function setCookie(name,value){
    if(!name||!value) return;
    var Days = 30;//默认30天
    var exp  = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ encodeURIComponent(value) +";expires="+ exp.toUTCString();
}

// 获取cookie
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return decodeURIComponent(arr[2]);
    return null;
}

// 删除cookie
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(!cval) document.cookie=name +"="+cval+";expires="+exp.toUTCString();
}

下面介绍js-cookie的安装及操作使用

一、安装

1、npm安装

npm i js-cookie -S

二、使用

1、cookie设置

import Cookies from 'js-cookie'

Cookies.set('foo', 'bar')

增加cookie的有效时间（7天有效）

Cookies.set('name', 'value', { expires: 7 })

指定根路径path

Cookies.set('name', 'value', { expires: 7, path: '' })

2、cookie获取

获取指定的key对应的值

Cookies.get('name') // 有值的时候返回找到的值
Cookies.get('nothing') // => 没有值返回undefined

获取所有的cookie值

Cookies.get()  // => { name: 'value' }

3、cookie删除

Cookies.remove('name')

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧