js-cookie的使用

之前前端项目中存取cookie都是本身去封装相关函数，近期项目开发中为了方便（偷懒），就使用了js-cookie。对于这个插件，网上资料均可以很容易得知它是一个很方便且很简单的用于操做cookie的js API。本文只是一个简单记录如何安装和使用它的一个笔记，除了能帮助本身加深印象，固然也但愿帮助有须要了解和使用它的大家。

1、安装js-cookie :

一、方式一：在你的工程项目中使用npm进行安装

npm install js-cookie --save

二、方式二：直接使用cdn资源

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

三、方式三：本地下载js-cookie的文件，而后进行项目script标签引入：

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

2、具体使用

若是是经过npm进行安装的，那么可使用import进行引入你的项目,其余方式能够直接进行使用

import jsCookie from 'js-cookie';

一、存值

// 一、存普通的string
jsCookie.set('token','FADFERWVX31FDSCXZDAEWEER322121CZX');
jsCookie.set('name','zhangsan')
jsCookie.set('age',11,{expires: 7});//7天过时
jsCookie.set('gender','male',{expires: 7, path: 'locahost:8080/index'});//在locahost:8080/index这个地址的页面可用 7天后过时


// 二、传入Array或相似对象，而不是简单的string，那么js-cookie会将你传入的数据用JSON.stringify转换为string保存。
Cookies.set('userInfo', { username: 'zhangsan' });

二、取值

// 一、取普通的string
jsCookie.get('token');//获取token的值
jsCookie.get('name');//获取name的值
jsCookie.get('age');//获取age的值
jsCookie.get('gender');//获取gender的值
jsCookie.get();//获取全部cookie的键值对值

//二、取Array或对象
// 2.一、方式一：使用get方法来取Array或对象，js-cookie直接返回string，不进行解析
Cookies.get('userInfo'); // => '{"username":"zhangsan"}'
Cookies.get(); // => { name: '{"username":"zhangsan"}' }

//2.二、方式二：用getJSON方法获取cookie，那么js-cookie会用JSON.parse解析string并返回对象值
Cookies.getJSON('userInfo'); // => { username: 'zhangsan' }
Cookies.getJSON(); // => { name: { username: 'zhangsan' } }

三、删除

jsCookie.remove('token');//删除token
jsCookie.remove('name');//删除 name
jsCookie.remove('age');//删除age
jsCookie.remove('userInfo');//删除userInfo

//若是值设置了路径，那么不能用简单的delete方法删除值，须要在delete时指定路径
jsCookie.remove('gender',{path:''});//删除带有path的gender   

//删除的是不存在的cookie，那么系统也是不会报错的，没有返回值
jsCookie.remove('eqedaada');//无返回值

注意：

一、 删除须要注意的是，若是你删除的是不存在的cookie，那么系统也是不会报错的，没有返回值
二、若是值设置了路径，那么不能用简单的delete方法删除值，须要在delete时指定路径

3、关于js-cookie的set方法的那些参数

一、expires: 有效期（Nunber/Date）
值为numbe时，那么它的单位是天，好比，expires:7,表示的是有效期7天
值为Date对象时，有效期是到Date值那一刻
默认的有效期是至用户关闭浏览器那一刻

二、path:  路径(string)
表示cookie对哪一个地址可见，默认是“/”

三、domain :  域名(string)
表示cookie对哪一个域名可见，设置以后，其域名的子域名也是可见的

四、secure
值为true或者false，表示cookie的传输是否仅仅支持https,默认是不要求协议必须为https