js-cookie的使用细则

77 阅读 0 评论 51 点赞

我是靠谱客的博主能干花生，这篇文章主要介绍js-cookie的使用细则，现在分享给大家，希望可以做个参考。

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

一、安装js-cookie :

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

复制代码

1
2
 npm install js-cookie --save

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

复制代码

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

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

复制代码

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

二、具体使用

如果是通过npm进行安装的，那么可以使用import进行引入你的项目,其他方式可以直接进行使用

复制代码

1
2
import jsCookie from 'js-cookie';

1、存值

复制代码

1
2
3
4
5
6
7
8
9
10
// 1、存普通的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天后过期


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

2、取值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1、取普通的string
jsCookie.get('token');//获取token的值
jsCookie.get('name');//获取name的值
jsCookie.get('age');//获取age的值
jsCookie.get('gender');//获取gender的值
jsCookie.get();//获取所有cookie的键值对值

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

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

3、删除

复制代码

1
2
3
4
5
6
7
8
9
10
11
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');//无返回值

注意：

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1、expires: 有效期（Nunber/Date）
值为numbe时，那么它的单位是天，比如，expires:7,表示的是有效期7天
值为Date对象时，有效期是到Date值那一刻
默认的有效期是至用户关闭浏览器那一刻

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

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

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