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')
觉得效果不错的请帮忙加个关注点个赞,每天分享前端实用开发技巧