以前前端项目中存取cookie都是自己去封装相关函数,近期项目开发中为了方便(偷懒),就使用了js-cookie。对于这个插件,网上资料都可以很容易得知它是一个很方便且很简单的用于操作cookie的js API。本文只是一个简单记录如何安装和使用它的一个笔记,除了能帮助自己加深印象,当然也希望帮助有需要了解和使用它的你们。
一、安装js-cookie :
1、方式一:在你的工程项目中使用npm进行安装
复制代码
1
2npm 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
2import 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
11jsCookie.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
151、expires: 有效期(Nunber/Date) 值为numbe时,那么它的单位是天,比如,expires:7,表示的是有效期7天 值为Date对象时,有效期是到Date值那一刻 默认的有效期是至用户关闭浏览器那一刻 2、path: 路径(string) 表示cookie对哪个地址可见,默认是“/” 3、domain : 域名(string) 表示cookie对哪个域名可见,设置之后,其域名的子域名也是可见的 4、secure 值为true或者false,表示cookie的传输是否仅仅支持https,默认是不要求协议必须为https
最后
以上就是能干花生最近收集整理的关于js-cookie的使用细则的全部内容,更多相关js-cookie内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复