jquery.cookie 使用方法

大 | 中 | 小
[不指定 2013/05/19 00:36 | by 刘新修 ]
一个轻量级的cookie 插件，可以读取、写入、删除 cookie。
jquery.cookie.js 的配置
首先包含jQuery的库文件，在后面包含 jquery.cookie.js 的库文
JavaScript代码
  1. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
  2. <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'); // cookie存在 => 'the_value'
$.cookie('not_existing'); // cookie不存在 => null
5.删除cookie，通过传递null作为cookie的值即可：
$.cookie('the_cookie', null);
 
----------相关参数的解释---------------
1).expires: 365
定义cookie的有效时间，值可以是一个数字（从创建cookie时算起，以天为单位）或一个Date 对
象。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。
2).path: '/'
默认情况：只有设置cookie的网页才能读取该cookie。
定义cookie的有效路径。默认情况下， 该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为） 。
如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: '/'。如果你想删除一个定义
了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie('the_cookie', null,
{ path: '/' });。 domain: 'example.com'
默认值：创建 cookie的网页所拥有的域名。
3).secure: true
默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。
4).raw: true
默认值：false。
默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码，
decodeURIComponent 解码）。要关闭这个功能设置 raw: true 即可。
XML/HTML代码
  1. <head>  
  2.     <title>cookie保存用户名密码</title>  
  3.     <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>  
  4.     <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>  
  5.     <!--插件必须放在jquery下面-->  
  6.     <script type="text/javascript">  
  7.         $(function () {  
  8.             $("#btn").click(function () {  
  9.                 var hname = $("#txtname").val();  
  10.                 var hpassword = $("#txtpassword").val();  
  11.                 $.cookie("hostname", hname, { expires: 1 });  
  12.                 $.cookie("hostpassword", hpassword, { expires: 1 });  
  13.                 if (hname == "admin" && hpassword == "123456") {  
  14.                     alert("欢迎admin登入");  
  15.                 }  
  16.             });  
  17.             var hname = $.cookie("hostname");  
  18.             var hpassword = $.cookie("hostpassword");  
  19.             if (hname && hpassword) {  
  20.                 $("#txtname").val(hname);  
  21.                 $("#txtpassword").val(hpassword);  
  22.             }  
  23.         });  
  24.     </script>  
  25. </head>  
  26. <body>  
  27. <table border="1">  
  28.     <tr>  
  29.         <td>用户名：</td>  
  30.         <td><input type="text" id="txtname" /></td>  
  31.     </tr>  
  32.     <tr>  
  33.         <td>密码：</td>  
  34.         <td><input type="password" id="txtpassword" /></td>  
  35.     </tr>  
  36.     <tr>  
  37.         <td colspan="2"><input type="button" id="btn" value="进入" /></td>  
  38.     </tr>  
  39. </table>  
  40. </body>  

 

使用jquery实现对cookie的操作  前段时间刚学完jquery和ajax，老师就要我们使用jquery和ajax做一个项目，功能类似于淘宝一样的网上购物，但是不允许使用服务器控件。那么要想保存用户登录信息的cookie也就只有使用jquery了。其实使用query操作cookie也不难。

首先我们要下载一个jquery.cookie.js的插件，然后添加到项目里面就行了。
下面我们来简单了解一下jquery.cookie.js这个插件的用法：
 
jquery中cook的使用方法：
1.首先找到jquery.cook.js这个文件，然后添加到html页或aspx页中（请注意上面两个文件的顺序切勿添加反了）
2.然后在需要使用cookie的js文件中使用cookie
/// <reference path="jquery-1.8.3.min.js" />
/// <reference path="jquery.cookie.js" />
（请注意上面两个文件的顺序切勿添加反了）
3.cookie的简单介绍  cookie("cookie的名称","cookie中保存的值","cookie保存的时间（单位为天）")
4.使用cookie  获取将本地的cookie中的值 var v= $.cookie("GoodsInfo")  新创建一个名为UserInfo的cookie，其值为：userName=zhangsan;pwd:123456;id=1，
保存时间为7天:
var value = "userName=zhangsan;pwd=123456;id=1";
$.cookie("UserInfo", cookieValue, { expires: 7 });
//{ expires: 7 }cookie在本地保存的时间，需要修改时间的话只需要将7改为其他值
 
为了方便获取到cookie中的值，我们也可以以"用户名;密码;用户编号"的形式来存放cookie的值：  var value="zhangsan;123456;1";
//建议使用这种方法
5.cookie的具体使用：
//在页面加载的时候会执行下面的
JavaScript代码
  1. $(function() {
  2. //判断本地之后存在cookie，如果存在即取出里面的值    
  3. if($.cookie("UserInfo")!=null)
  4. {
  5. //获取存放在cookie中的值  var cookieValue = $.cookie("UserInfo");  
  6. //将获取到的cookie中的值以";"分割，会分别得到id与count的字符串  
  7. //分割得到的值会存放还一个数组中  var cookieArr=cookieValue.split(';');  
  8. //这样获取到得的cookieArr中的个元素以及值分别为：  
  9. //cookieArr[0]:zhangsang     对应用户的用户名  
  10. //cookieArr[1]:123456        对应用户的密码  
  11. //cookieArr[2]:1             对应用户的编号  
  12. }
  13.  
  14. })
6.在WebService中用来实现登录的方法中可以按照这样的思路来编写代码：
(1)根据用户的用户名和密码查询用户的信息
(2)将查询到得用户的信息以“用户名;密码;用户编号”的形式返回，也可以单独返回用户的编号
(3)在$.ajax执行成功后的方法里面可以将返回的值存储在cookie中
JavaScript代码
  1. $.ajax({
  2. type: "post",
  3. contentType: "application/json",
  4. url: "WebServices/UserWebService.asmx/GetUserInfo",
  5. data: "{userName:'" + userName + "',userPwd:'" + userPwd + "'}",
  6. dataType: "json",
  7. success: function (result)
  8. {
  9. $.cookie("UserInfo", result.d, { expires: 7 });
  10. }
  11.  
  12. });
在需要使用用户编号或用户名的方法中使用第5步提供的方法获取用户的编号或用户名,然后再将用户的编号或用户名作为参数传递
****************************************************************************************
关闭广告的实例DEMO：
JavaScript代码
  1. $(".close").click(function(){
  2. $(this).parents('div.ad-box:eq(0)').hide();
  3. $.cookie('topad', 'test', { path: '/', expires: 1 });
  4. return false;
  5. })
  6. //判断如果topad不为空的话就执行
  7. if($.cookie("topad")!=null){
  8. $(".topad").hide();
  9. }
XML/HTML代码
  1. <div class="firstad topad ad-box">
  2. <h4>这里的第一个广告</h4>
  3. <div id="close-boxs"><div class="close"></div></div>
  4. </div><!-- firstad end -->
CSS代码
  1. .firstad{width:800px;height:50px;line-height:50px;text-align:center;color:#fff;width:auto;background:#0000ff;position:relative;}
  2. .close{width:10px;height:10px;background:#FF0000;border:1px solid white;position:absolute;top:0px;rightright:0;cursor:pointer}
  3.  

 

Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5760)