jquery.cookie用法详细解析


Posted in Javascript onDecember 18, 2013

Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie)。

例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息?

怎么在js/jquery中操作处理cookie那?今天分享一个cookie操作类--jQuery.Cookie.js,是一个轻量级的Cookie管理插件。

Cookie下载地址: http://plugins.jquery.com/project/cookie.

特别提醒,今日发现一个特别的错误,google浏览器提示:has no method $.cookie。火狐浏览器提示:$.cookie is not a function;调试了半天,终于找到原因,如果同一个页面两次或者多次引入Jquery插件就会报此错误。

使用方法:

1、引入jQuery与jQuery.Cookie.js插件。

<script src="jQuery.1.8.3.js" type="text/javascript"></script> 

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

2.将cookie写入文件

var COOKIE_NAME = 'username';  
  if( $.cookie(COOKIE_NAME) ){  
    $("#username").val( $.cookie(COOKIE_NAME) );  
  }  
  $("#check").click(function(){  
    if(this.checked){  
      $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });  
      //var date = new Date();  
      //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
      //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });  
    }else{  
      $.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie  
    }  
  });

函数。

 语法:$.cookie(名称,值,[option])

 (1)读取cookie值

 $.cookie(cookieName)

 cookieName:要读取的cookie名称。

示例:$.cookie("username"); 读取保存在cookie中名为的username的值。

 (2)写入设置Cookie值:

 $.cookie(cookieName,cookieValue);

cookieName:要设置的cookie名称,cookieValue表示相对应的值。

 示例:$.cookie("username","admin"); 将值"admin"写入cookie名为username的cookie中。

  $.cookie("username",NULL);

 销毁名称为username的cookie

 (3) [option]参数说明:

 expires:

有限日期,可以是一个整数或一个日期(单位:天)。

这个地方也要注意,如果不设置这个东西,浏览器关闭之后此cookie就失效了

 path:

  cookie值保存的路径,默认与创建页路径一致。

domin: cookie域名属性,默认与创建页域名一样。

这个地方要相当注意,跨域的概念,如果要主域名二级域名有效则要设置

".xxx.com"

secrue:

一个布尔值,表示传输cookie值时,是否需要一个安全协议。

 示例:

$.cookie("like", $(":radio[checked]").val(), { 

        path: "/", expiress: 7 

        })

一个完整设置与读取cookie的页面代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>jQuery学习2</title> 
  <script src="jQuery.1.8.3.js" type="text/javascript"></script> 
  <script src="jquery.cookie.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    $(function () { 
      $("#username").val($.cookie("username")); 
      if ($.cookie("like") == "刘德华") { 
        $(":radio[value='刘德华']").attr("checked", 'checked') 
      } 
      else { 
        $(":radio[value='张学友']").attr("checked", 'checked') 
      } 
      $(":button").click(function () { 
        $.cookie("username", $("#username").val(), { 
          path: "/", expires: 7 
        }) 
        $.cookie("like", $(":radio[checked]").val(), { 
          path: "/", expiress: 7 
        }) 
      }) 
    }) 
  </script> 
</head> 
<body> 
  <p><input type="text" id="username" value="" /></p> 
  <p> 
    <input type="radio" name="like" value="刘德华" />刘德华 
    <input type="radio" name="like" value="张学友" />张学友 
  </p> 
  <p><input type="button" value="保存" /></p> 
</body> 
</html>

cookie本质上是一个txt文本,因此只能够存入字符串,对象通常要序列化之后才能存入cookie,而取的时候要反序列才又能得到对象。

$(function () { 
     if ($.cookie("o") == null) { 
       var o = { name: "张三", age: 24 }; 
       var str = JSON.stringify(o);//对序列化成字符串然后存入cookie 
       $.cookie("o", str, { 
         expires:7  //设置时间,如果此处留空,则浏览器关闭此cookie就失效。 
       }); 
       alert("cookie为空"); 
     } 
     else { 
       var str1 = $.cookie("o"); 
       var o1 = JSON.parse(str1);
//字符反序列化成对象 
       alert(o1.name);



//输反序列化出来的对象的姓名值 
     } 
   })

一个轻量级的cookie插件,可以读取、写入、删除cookie。

jquery.cookie.js的配置

首先包含jQuery的库文件,在后面包含jquery.cookie.js的库文件

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

使用方法

新添加一个会话cookie:

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

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

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

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

注:当指明了cookie有效时间时,所创建的cookie被称为“持久cookie(persistent cookie)”。

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

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

注:在默认情况下,只有设置cookie的网页才能读取该cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。

cookie的路径用于设置能够读取cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取cookie(一般不要这样设置,防止出现冲突)

读取cookie:

$.cookie('the_cookie');

// cookie存在 => 'the_value' $.cookie('not_existing'); // cookie不存在 => null

删除cookie,通过传递null作为cookie的值即可:

$.cookie('the_cookie', null);

相关参数的解释

expires: 365

定义cookie的有效时间,值可以是一个(从创建cookie时算起,以天为单位)或一个Date。

如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。
 

path: '/'

默认情况:只有设置cookie的网页才能读取该cookie。

定义cookie的有效路径。默认情况下,该参数的值为创建cookie的网页所在路径(标准浏览器的行为)。

如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: '/'。

如果你想删除一个定义了有效路径的cookie,你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。

domain: 'example.com'

默认值:创建cookie的网页所拥有的域名。
 

secure: true

默认值:false。如果为true,cookie的传输需要使用安全协议(HTTPS)。
 

raw: true

默认值:false。 默认情况下,读取和写入cookie的时候自动进行编码和解码(使用encodeURIComponent编码,decodeURIComponent解码)。

要关闭这个功能设置raw: true即可。

$.cookie('the_cookie'); // get cookie $.cookie('the_cookie', 'the_value'); // set cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future $.cookie('the_cookie', '', { expires: -1 }); // delete cookie
$.cookie('the_cookie', null); // delete cookie

$.cookie('the_cookie','the_value', {expires: 7, path: '/', domain:'80tvb.com', secure: true});//完整调用方式

//或者这样:$.cookie('the_cookie','the_value');

//删除Cookie: $.cookie('the_cookie',null);

 

jQuery操作cookie的插件,大概的使用方法如下

$.cookie('the_cookie'); //读取Cookie值
$.cookie('the_cookie', ‘the_value'); //设置cookie的值
$.cookie('the_cookie', ‘the_value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true});//新建一个cookie 包括有效期 路径域名等
$.cookie('the_cookie', ‘the_value'); //新建cookie
$.cookie('the_cookie', null); //删除一个cookie

jquery设置cookie过期时间与检查cookies是否可用

让cookies在x分钟后过期
var date = new date();
date.settime(date.gettime() + (x * 60 * 1000));
$.cookie(‘example', ‘foo', { expires: date });

$.cookie(‘example', ‘foo', { expires: 7});

检查cookies是否可用
$(document).ready(function() {var dt = new date();dt.setseconds(dt.getseconds() + 60);document.cookie = “cookietest=1; expires=” + dt.togmtstring();var cookiesenabled = document.cookie.indexof(“cookietest=”) != -1;if(!cookiesenabled){//cookies不能用……..}}); 

Javascript 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 #Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 #Javascript
Javascript浅谈之this
Dec 17 #Javascript
将list转换为json失败的原因
Dec 17 #Javascript
js实现可拖动DIV的方法
Dec 17 #Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 #Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 #Javascript
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
php 生成文字png图片的代码
2011/04/17 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python中的hypot()方法使用简介
2015/05/18 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
opencv实现图像平移效果
2021/03/24 Python
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
投标承诺书范本
2014/03/27 职场文书
个人四风对照检查材料
2014/09/26 职场文书
春节慰问信范文
2015/02/15 职场文书
商务司机岗位职责
2015/04/10 职场文书
团拜会主持词
2015/07/04 职场文书
学生病假条范文
2015/08/17 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
python基础之匿名函数详解
2021/04/21 Python
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android