首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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不能用……..}}); 

jquery.cookie用法详细解析

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
jQuery插件之validation插件
Mar 29 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
JS改变页面颜色源码分享
Feb 24 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
锁(1) 逻辑架构(1) offset(1) 策略(1) 性能优化(3) 缓存(3) limit(1) 弱口令(1) 内存(1) 事务(5)
You might like
如何在PHP程序中防止盗链
2008/04/09 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
javascript 客户端验证上传图片的大小（兼容IE和火狐）
2009/08/15 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行？
2019/05/15 Python
对Python函数设计规范详解
2019/07/19 Python
python实现静态服务器
2019/09/05 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
python excel多行合并的方法
2020/12/09 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
文秘应聘自荐书范文
2014/02/18 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
写给老婆的保证书
2015/02/27 职场文书