js-cookie 和 nprogress插件的使用

js-cookie

使用步骤：

• 下载 npm i js-cookie

• 导入 import Cookiejs from 'js-cookie'

• 获取： Cookiejs.get(key)

• 设置：Cookiejs.set(key,value)

• 删除：Cookiejs.remove(key)

• json相关

js-cookie允许你向cookie中存储json信息。

如果你通过set方法，传入Array或类似对象，而不是简单的string，那么js-cookie会将你传入的数据用JSON.stringify转换为string保存。

Cookiejs.set('name', { foo: 'bar' });
Cookiejs.get('name'); // => '{"foo":"bar"}'
Cookiejs.get(); // => { name: '{"foo":"bar"}' }

如果你用getJSON方法获取cookie，那么js-cookie会用JSON.parse解析string并返回。

Cookiejs.getJSON('name'); // => { foo: 'bar' }
Cookiejs.getJSON(); // => { name: { foo: 'bar' } }

set方法支持的属性

1. expires
   定义有效期。如果传入Number，那么单位为天，你也可以传入一个Date对象，表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。

2. path
   string，表示此cookie对哪个地址可见。默认为”/”。

3. domain
   string，表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见。

4. secure
   true或false，表示cookie传输是否仅支持https。默认为不要求协议必须为https。

nprogress

这是一个类似youtube、Medium等网站上的小进度条插件。纳米级的进度条，涓涓细流动画告诉你的用户，一些事情正在发生！

1:安装 yarn add nprogress   ||     npm install --save nprogress

2:导入 import Nprogress from 'nprogress'

           import 'nprogress/nprogress.css'

使用

直接调用 start()或者done()来控制进度条。

NProgress.start();
NProgress.done();

可以通过调用 .set(n)来设置进度，n是0-1的数字。

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。

NProgress.inc();

通过使用done()让进度条关闭。

NProgress.done(true);