jquery.cookie 使用方法

Sat, 18 May 2013 16:36:38 +0000

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

jquery.cookie.js 的配置

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

JavaScript代码

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

使用方法

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代码

<head>
<title>cookie保存用户名密码title>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript">script>
<script src="Scripts/jquery.cookie.js" type="text/javascript">script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var hname = $("#txtname").val();
var hpassword = $("#txtpassword").val();
$.cookie("hostname", hname, { expires: 1 });
$.cookie("hostpassword", hpassword, { expires: 1 });
if (hname == "admin" && hpassword == "123456") {
alert("欢迎admin登入");
}
});
var hname = $.cookie("hostname");
var hpassword = $.cookie("hostpassword");
if (hname && hpassword) {
$("#txtname").val(hname);
$("#txtpassword").val(hpassword);
}
});
script>
head>
<body>
<table border="1">
<tr>
<td>用户名：td>
<td><input type="text" id="txtname" />td>
tr>
<tr>
<td>密码：td>
<td><input type="password" id="txtpassword" />td>
tr>
<tr>
<td colspan="2"><input type="button" id="btn" value="进入" />td>
tr>
table>
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

///

（请注意上面两个文件的顺序切勿添加反了）

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代码

$(function() {
//判断本地之后存在cookie，如果存在即取出里面的值
if($.cookie("UserInfo")!=null)
{
//获取存放在cookie中的值 var cookieValue = $.cookie("UserInfo");
//将获取到的cookie中的值以";"分割，会分别得到id与count的字符串
//分割得到的值会存放还一个数组中 var cookieArr=cookieValue.split(';');
//这样获取到得的cookieArr中的个元素以及值分别为：
//cookieArr[0]:zhangsang 对应用户的用户名
//cookieArr[1]:123456 对应用户的密码
//cookieArr[2]:1 对应用户的编号
}
})

6.在WebService中用来实现登录的方法中可以按照这样的思路来编写代码：

(1)根据用户的用户名和密码查询用户的信息

(2)将查询到得用户的信息以“用户名;密码;用户编号”的形式返回，也可以单独返回用户的编号

(3)在$.ajax执行成功后的方法里面可以将返回的值存储在cookie中

JavaScript代码

$.ajax({
type: "post",
contentType: "application/json",
url: "WebServices/UserWebService.asmx/GetUserInfo",
data: "{userName:'" + userName + "',userPwd:'" + userPwd + "'}",
dataType: "json",
success: function (result)
{
$.cookie("UserInfo", result.d, { expires: 7 });
}
});

在需要使用用户编号或用户名的方法中使用第5步提供的方法获取用户的编号或用户名,然后再将用户的编号或用户名作为参数传递

****************************************************************************************

关闭广告的实例DEMO：

JavaScript代码

$(".close").click(function(){
$(this).parents('div.ad-box:eq(0)').hide();
$.cookie('topad', 'test', { path: '/', expires: 1 });
return false;
})
//判断如果topad不为空的话就执行
if($.cookie("topad")!=null){
$(".topad").hide();
}

XML/HTML代码

<div class="firstad topad ad-box">
<h4>这里的第一个广告h4>
<div id="close-boxs"><div class="close">div>div>
div>

CSS代码

.firstad{width:800px;height:50px;line-height:50px;text-align:center;color:#fff;width:auto;background:#0000ff;position:relative;}
.close{width:10px;height:10px;background:#FF0000;border:1px solid white;position:absolute;top:0px;rightright:0;cursor:pointer}

Tags - jquery , cookie

[评论] jquery.cookie 使用方法

Thu, 01 Jan 1970 00:00:00 +0000

刘新修

jquery.cookie 使用方法

[评论] jquery.cookie 使用方法