首页
所有分类
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吗？
Feb 24 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
一看就会的vuex实现登录验证（附案例）
Jan 09 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
Delphi面试题(13) Ruby面试题(15) Servlet面试题(20) 自我鉴定(671) 自我评价(886) SOA面试题(9) 求职信(1029) J2EE面试题(19) UNIX面试题(27) 自荐信(981)
You might like
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
PHP学习之PHP变量
2006/10/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
微信域名检测接口调用演示步骤（含PHP、Python）
2019/12/08 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python实现三壶谜题的示例详解
2020/11/02 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
物业客服专员岗位职责
2013/11/30 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
未婚证明书模板
2014/10/08 职场文书
党员作风建设自查报告
2014/10/23 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
祝福语集锦：给满月宝宝的祝福语
2019/11/20 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Nginx反向代理配置的全过程记录
2021/06/22 Servers