背景：最近的vue项目中由于项目的token是需要设置过期时间的，当然，以前这种过期的行为逻辑一直是后端来控制，但这次要求前端也进行token时间的一个监控，由于懒得封装cookie，所以就用了js-cookie的一个cookie封装库
一、什么是js-cookie
看名字我们就知道这是关于cookie存储的一个js的API，根据官网描述其优点有：适用所有浏览器、接受任何字符、经过任何测试没什么bug、支持CMD和CommonJS、压缩之后非常小，仅900个字节
二、在项目中进行安装：
1 | npm install js-cookie 'js-cookie' --save |
二、在项目中的入口文件（main.js）全局引入
1 | import Cookies from 'js-cookie' |
三、在项目中使用：
1 2 3 4 5 6 7 8 9 10 11 12 | //1、存cookie set方法支持的属性有 ： expires->过期时间 path->设置为指定页面创建cookie domain-》设置对指定域名及指定域名的子域名可见 secure->值有false和true ,表示设置是否只支持https,默认是false Cookies.set('key', 'value'); //创建简单的cookie Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie Cookies.set('key', 'value', { expires: 17, path: '' }); //可以通过配置path,为当前页创建有效期7天的cookie //2、取cookie Cookies.get('key'); // 获取指定key 对应的value Cookies.get(); //获取所有value //3、删除cookie Cookies.remove('key');//删除普通的cookie Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie |
1 2 3 4 5 | 注意：如果存的是对象，如： userInfo = {age:111,score:90}; Cookie.set('userInfo',userInfo) 取出来的userInfo需要进行JSON的解析,解析为对象：let res = JSON.parse( Cookie.get('userInfo') ); 当然你也可以使用：Cookie.getJSON('userInfo'); |