轻量级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 相关文章推荐
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python高斯消除矩阵
2019/01/02 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python爬虫教程知识点总结
2020/10/19 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
python中os.remove()用法及注意事项
2021/01/31 Python
本科生学习总结的自我评价
2013/10/02 职场文书
多媒体教室标语
2014/06/26 职场文书
班主任寄语2015
2015/02/26 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书