轻量级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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
后天观后感
2015/06/08 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
初三化学教学反思
2016/02/22 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL