轻量级JS Cookie插件js-cookie的使用方法


Posted in Javascript onMarch 22, 2018

Cookie是网站设计者放置在客户端的小文本文件,一般后台语言使用的比较多,可以实现用户个性化的一些需求。js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级。js-cookie也支持npm和Bower安装和管理。下面看看js-cookie的具体用法。

A simple, lightweight JavaScript API for handling cookies

Works in all browsers
Accepts any character
Heavily tested
No dependency
Unobtrusive JSON support
Supports AMD/CommonJS
RFC 6265 compliant
Useful Wiki
Enable custom encoding/decoding
~900 bytes gzipped!

引用方法:

1、引入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.模块化开发时: import Cookies from 'js-cookie'

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

a、设置cookie

Cookies.set('name', 'value', { expires: 7, path: '' });//7天过期

Cookies.set('name', { foo: 'bar' });//设置一个json

b、读取cookie

Cookies.get('name');//获取cookie

Cookies.get(); #读取所有的cookie

c、删除cookie

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

下面是国外的介绍

Basic Usage

Create a cookie, valid across the entire site:

Cookies.set('name', 'value');

Create a cookie that expires 7 days from now, valid across the entire site:

Cookies.set('name', 'value', { expires: 7 });

Create an expiring cookie, valid to the path of the current page:

Cookies.set('name', 'value', { expires: 7, path: '' });

Read cookie:

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

Read all visible cookies:

Cookies.get(); // => { name: 'value' }

Delete cookie:

Cookies.remove('name');

Delete a cookie valid to the path of the current page:

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

IMPORTANT! When deleting a cookie, you must pass the exact same path and domain attributes that were used to set the cookie, unless you're relying on the default attributes.

Note: Removing a nonexistent cookie does not raise any exception nor return any value.

Namespace conflicts

If there is any danger of a conflict with the namespace Cookies, the noConflict method will allow you to define a new namespace and preserve the original one. This is especially useful when running the script on third party sites e.g. as part of a widget or SDK.

// Assign the js-cookie api to a different variable and restore the original "window.Cookies"

var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');

Note: The .noConflict method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments.

JSON

js-cookie provides unobtrusive JSON storage for cookies.

When creating a cookie you can pass an Array or Object Literal instead of a string in the value. If you do so, js-cookie will store the string representation of the object according to JSON.stringify:

Cookies.set('name', { foo: 'bar' });

When reading a cookie with the default Cookies.get api, you receive the string representation stored in the cookie:

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

When reading a cookie with the Cookies.getJSON api, you receive the parsed representation of the string stored in the cookie according to JSON.parse:

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

Note: To support IE6-7 (and IE 8 compatibility mode) you need to include the JSON-js polyfill: https://github.com/douglascrockford/JSON-js

更多的可以参考官方说明:

https://github.com/js-cookie/js-cookie

https://www.npmjs.com/package/js-cookie

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
vue.js的安装方法
May 12 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 #Javascript
Java设计中的Builder模式的介绍
Mar 22 #Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 #Javascript
收集前端面试题之url、href、src
Mar 22 #Javascript
vue 的keep-alive缓存功能的实现
Mar 22 #Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 #Javascript
You might like
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
Js组件的一些写法
2010/09/10 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python简单实现基数排序算法
2015/05/16 Python
python生成excel的实例代码
2017/11/08 Python
tensorflow获取变量维度信息
2018/03/10 Python
python代码过长的换行方法
2018/07/19 Python
python中类的属性和方法介绍
2018/11/27 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python是怎样处理json模块的
2020/07/16 Python
python 实现图片裁剪小工具
2021/02/02 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
医学生个人求职信范文
2013/09/24 职场文书
小学数学教学反思
2014/02/02 职场文书
有创意的广告词
2014/03/18 职场文书
信息技术课后反思
2014/04/27 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
化工专业求职信
2014/07/01 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL