轻量级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 相关文章推荐
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
vue如何进行动画的封装
Sep 26 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
浅谈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 分页类实现代码
2009/12/03 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
详解python做UI界面的方法
2019/02/27 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python简易版图书管理系统
2019/08/12 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
详解Python yaml模块
2020/09/23 Python
Python远程linux执行命令实现
2020/11/11 Python
python实现视频压缩功能
2020/12/18 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
社区党员先进事迹
2014/01/22 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
吴仁宝观后感
2015/06/09 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
redis lua限流算法实现示例
2022/07/15 Redis