轻量级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 相关文章推荐
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
AngularJs表单验证实例详解
May 30 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
PHP读取MySQL数据代码
2008/06/05 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
公司合作意向书范文
2014/07/30 职场文书
结婚典礼致辞
2015/07/28 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
关于Vue中的options选项
2022/03/22 Vue.js