轻量级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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 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
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
js 字符串操作函数
2009/07/25 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python 图片验证码代码
2008/12/07 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
python两种注释用法的示例
2020/10/09 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
导游词300字
2015/02/13 职场文书
教学督导岗位职责
2015/04/10 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
python中的None与NULL用法说明
2021/05/25 Python