Vue.js学习（六）—— 轻量级JS Cookie插件

　　js-cookieGitHub地址
　　js-cookie具体使用

　　Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。

　　js-cookie插件是一个JS操作cookie的插件，源文件只有3.34 KB，非常轻量级，js-cookie也支持npm和Bower安装和管理，下面看看js-cookie的具体用法

一、引入js-cookie.js

1、直接饮用cdn

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

2、本地下载下来后

<script src="/path/to/js.cookie.js"></script>

3、模块化开发时

$ npm install js-cookie --save
import Cookies from 'js-cookie'

 

二、js-cookie.js常用的API和方法

1、设置cookie

Cookies.set('name', 'value');//创建一个cookie，在整个站点都有效
Cookies.set('name_json', {name:'injurys', age:20});//创建一个cookie，数据是json对象，在整个站点都有效
Cookies.set('name', 'value', { expires: 7 });//创建一个cookie，有效期7天从现在，在整个站点都有效
Cookies.set('name', 'value', { expires: 7, path: '' });//创建一个过期的cookie，对当前页面的路径有效
Cookies.set('name', 'value', { expires: 7, path: '/', domain: config.COOKIE_DOMAIN});

　　以上三种方式都可以进行设置，设置的值如果不是字符串，那么在储存时将自动进行 JSON.stringify。

expires：设置当前cookie的过期时间，单位为 天。
path：设置当前cookie的有效路径。
domain：设置当前cookie的有效域名。
secure：cookie 传输需要安全协议（HTTPS）。

2、读取cookie

let res1 = Cookies.get('name');//获取指定名称的cookie
    'value'
let res2 = Cookies.get('name_json');
    '{"name":"injurys","age":20}'
let res3 = Cookies.getJSON('name_json');
    {name: "injurys", age: 20}
Cookies.get(); //读取所有的cookie

　　使用 get 方法获取到的是一个字符串，如果你设置的是一个 json 对象，可以使用 getJSON 获取，返回的就是转换格式的对象。

3、删除cookie

Cookies.remove('name'); //删除cookie时必须是同一个路径。

　　删除未存在的cookie不会引发任何异常，也不会返回任何值。

　　注意：删除cookie时必须传递与设置时一样的 路径（path） 和 域（domain） 属性。