首页
所有分类
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 页面坐标相关知识整理
Jan 09 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能
Feb 06 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
js合并两个数组生成合并后的key：value数组
May 09 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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
计划(88) 说明书(38) 开幕词(63) 汇报材料(247) 党团范文(807) 工作总结(1972) 报告(147) 任命书(51) 标语(336) 口号(179)
You might like
source.php查看源文件
2006/12/09 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
JS表格组件神器bootstrap table详解（强化版）
2016/05/26 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python对字典进行排序实例
2014/09/25 Python
python if not in 多条件判断代码
2016/09/21 Python
使用python编写监听端
2018/04/12 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
如何用JQuery进行表单验证
2013/05/29 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
博士生专家推荐信
2014/09/26 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
2014年测量员工作总结
2014/12/12 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript