jquery.cookie.js的介绍与使用方法


Posted in Javascript onFebruary 09, 2017

什么是 cookie?

cookie 就是页面用来保存信息,比如自动登录、记住用户名等等。

cookie 的特点

  1. 同个网站中所有的页面共享一套 cookie
  2. cookie 有数量、大小限制
  3. cookie 有过期时间jquery.cookie.js 是一款轻量级的 cookie 插件,可以读取,写入和删除 cookie。本文主要针对

jquery.cookie.js 的用法进行详细的介绍。

jquery.cookie.js 使用方法

Cookies

定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;

下载与引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js;

下载:http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

使用:

1.添加一个"会话cookie"

$.cookie('the_cookie', 'the_value');

这里没有指明 cookie有效时间,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为 “会话cookie(session cookie)”。

2.创建一个cookie并设置有效时间为 7天

$.cookie('the_cookie', 'the_value', { expires: 7 });

这里指明了cookie有效时间,所创建的cookie被称为“持久 cookie (persistent cookie)”。注意单位是:天;

3.创建一个cookie并设置 cookie的有效路径

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突)。

4.读取cookie

$.cookie('the_cookie');

5.删除cookie

$.cookie('the_cookie', null);   //通过传递null作为cookie的值即可

6.可选参数

$.cookie('the_cookie','the_value',{
  expires:7, 
  path:'/',
  domain:'jquery.com',
  secure:true
}) 

expires:(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;
path:(String)创建该Cookie的页面路径;
domain:(String)创建该Cookie的页面域名;
secure:(Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;

使用方法:

设置 cookie:

$.cookie('the_cookie', 'the_value');

注:如果 $.cookie 没有第三个参数,那么当浏览器关闭时,该 cookie 将会自动删除。

设置一个有效期为 7 天的 cookie:

$.cookie('the_cookie', 'the_value', {expires: 7});

注:$.cookie 第三个参数是一个对象,除了可以设置有效期(expires: 7),还可以设置有效路径(path: '/')、有效域(domain: 'jquery.com')及安全性(secure: true)。

读取 cookie:

$.cookie('the_cookie');

注:如果没有该 cookie,返回 null。

删除 cookie:

$.cookie('the_cookie', null);

我们只需要给需要删除的 cookie 设置为 null,就可以删除该 cookie。

最后附上源代码:

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

/**
 * Create a cookie with the given name and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 * used when the cookie was set.
 *
 * @param String name The name of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *    If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *    If set to null or omitted, the cookie will be a session cookie and will not be retained
 *    when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *   require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given name.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String name The name of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function(name, value, options) {
 if (typeof value != 'undefined') { // name and value given, set cookie
 options = options || {};
 if (value === null) {
  value = '';
  options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
  options.expires = -1;
 }
 var expires = '';
 if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
  var date;
  if (typeof options.expires == 'number') {
  date = new Date();
  date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
  } else {
  date = options.expires;
  }
  expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
 }
 // NOTE Needed to parenthesize options.path and options.domain
 // in the following expressions, otherwise they evaluate to undefined
 // in the packed version for some reason...
 var path = options.path ? '; path=' + (options.path) : '';
 var domain = options.domain ? '; domain=' + (options.domain) : '';
 var secure = options.secure ? '; secure' : '';
 document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
 } else { // only name given, get cookie
 var cookieValue = null;
 if (document.cookie && document.cookie != '') {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
  var cookie = jQuery.trim(cookies[i]);
  // Does this cookie string begin with the name we want?
  if (cookie.substring(0, name.length + 1) == (name + '=')) {
   cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
   break;
  }
  }
 }
 return cookieValue;
 }
};

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
javascript时间差插件分享
Jul 18 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
AngularJs表单校验功能实例代码
Feb 09 #Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 #Javascript
You might like
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
js实现验证码功能
2020/07/24 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python之yield和Generator深入解析
2019/09/18 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
教师见习期自我鉴定
2014/04/28 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
2014年班干部工作总结
2014/11/25 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
决心书格式及范文
2019/06/24 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏