在jQuery中,引入cookie插件后,可以很方便地定义某个Cookie名称,并设置Cookie值。通过设置好的Cookie,可以很便利地保存用户的页面浏览记录。在用户选择保存的情况下,还可以保存用户的登录信息。
示例cookie插件的使用:
(1)插件文件:
Js-8-3/jquery.cookie.js
(2)下载地址:
http://plugins.jquery.com/project/cookie
(3)功能描述:
在示例中,再增加一个是否保存用户名的复选框,当选中复选框时,并单击“提交”按钮,完成Cookie的设置。重新打开浏览器时,由于使用了Cookie保存用户名,在用户名文本框中显示上次登录的用户名;如果输入用户名后不选中复选框,单击“提交”按钮将销毁已存在的Cookie对象。
(4)实现代码:
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.cookie.js"></script>
<style type="text/css">
....省略样式代码
</style>
<script type="text/javascript">
$(function(){
if ($.cookie("UserName")){ //如果有值显示在文本框中
$("#UserName").val($.cookie("#UserName"));
}
$("#sbtUser").submit(function(){ //表单提交事件
//如果选中了保存"用户名"项
if($("#chkSave").attr("checked")){ //设置Cookie值
$.cookie("UserName",$("#UserName").val(),{
path:"/",expires:7
})
}
else { //销毁Cookie值
$.cookie("UserName",null,{
path:"/"
})
}
return false //表单不提交
})
})
</script>
<form id="frmUserInfo" method="get" action="#">
<div class="divFrame">
<div class="divTitle">
用户登录
</div>
<div class="divContent">
<div>
用户名:<br />
<input id="UserName" name="UserName" type="text" class="txt" />
</div>
<div>
密码:<br />
<input id="UserPass" name="UserPass" type="password" class="txt" />
</div>
<div>
<input id="chkSave" type="checkbox" />
是否保存用户名
</div>
</div>
<div class="divBtn">
<input id="sbtUser" type="submit" value="提交" class="btn" />
</div>
<div id="divData"></div>
</div>
</form>
(5)代码分析:
在导入cookie插件后,可以通过一个全局性的方法管理客户端的Cookie对象,格式如下:
$.cookie(名称,值,[option])
如果是写入或设置Cookie值,其调用的格式如下:
$.cookie(cookieName,cookieValue)
其中,参数"cookieName"表示要设置的Cookie名称,"cookieValue"表示相对应的值。
如果是读取Cookie值,其调用的格式如下:
$.cookie(cookieName)
其中,参数"cookieName"表示要读取的Cookie名称。
如果是销毁Cookie值,其调用的格式如下:
$.cookie(cookieName,NULL)
其中,参数"cookieName"表示要销毁的Cookie名称。在销毁的Cookie时,其可选项参数中的路径(path)和域名(domain)必须与设置时一样,否则不能销毁。
另外,在$.cookie方法中,可选项参数[option]以对象的形式展示,用于补充说明设置的cookie对象,其常用属性如下:
$.cookie(cookieName,cookieValue,{
expires: //有限日期,可以是一个整数或一个日期(单位:天)
path: //Cookie值被保存的路径,默认值与创建页路径一致
domin: //Cookie域名属性,默认值与创建页域名一样
secure: //一个布尔值,表示传输Cookie值时,是否需要一个安全协议
})