通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶(hù)名、密碼登錄功能
Cookies
定義:讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶(hù)端的硬盤(pán)或內(nèi)存,從客戶(hù)端的硬盤(pán)讀取數(shù)據(jù)的一種技術(shù);
下載與引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js;
下載:http://plugins.jquery.com/cookie/
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script>
1.添加一個(gè)"會(huì)話(huà)cookie"
$.cookie('the_cookie', 'the_value');
這里沒(méi)有指明 cookie有效時(shí)間,所創(chuàng)建的cookie有效期默認(rèn)到用戶(hù)關(guān)閉瀏覽器為止,所以被稱(chēng)為 “會(huì)話(huà)cookie(session cookie)”。
2.創(chuàng)建一個(gè)cookie并設(shè)置有效時(shí)間為 7天
$.cookie('the_cookie', 'the_value', { expires: 7 });
這里指明了cookie有效時(shí)間,所創(chuàng)建的cookie被稱(chēng)為“持久 cookie (persistent cookie)”。注意單位是:天;
3.創(chuàng)建一個(gè)cookie并設(shè)置 cookie的有效路徑
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
在默認(rèn)情況下,只有設(shè)置 cookie的網(wǎng)頁(yè)才能讀取該 cookie。如果想讓一個(gè)頁(yè)面讀取另一個(gè)頁(yè)面設(shè)置的cookie,必須設(shè)置cookie的路徑。cookie的路徑用于設(shè)置能夠讀取 cookie的頂級(jí)目錄。將這個(gè)路徑設(shè)置為網(wǎng)站的根目錄,可以讓所有網(wǎng)頁(yè)都能互相讀取 cookie (一般不要這樣設(shè)置,防止出現(xiàn)沖突)。
4.讀取cookie
$.cookie('the_cookie');
5.刪除cookie
.cookie('the_cookie', null); //通過(guò)傳遞null作為cookie的值即可
6.可選參數(shù)
$.cookie('the_cookie','the_value',{ expires:7, path:'/', domain:'jquery.com', secure:true })
expires:(Number|Date)有效期;設(shè)置一個(gè)整數(shù)時(shí),單位是天;也可以設(shè)置一個(gè)日期對(duì)象作為Cookie的過(guò)期日期;
path:(String)創(chuàng)建該Cookie的頁(yè)面路徑;
domain:(String)創(chuàng)建該Cookie的頁(yè)面域名;
secure:(Booblean)如果設(shè)為true,那么此Cookie的傳輸會(huì)要求一個(gè)安全協(xié)議,例如:HTTPS;
代碼示例:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> <script src="jquery-1.8.3.min.js"></script> <script src="jquery.cookie.js"></script> <script src="jquery.base64.js"></script> <script language="javascript" type="text/javascript"> function setCookie(){ //設(shè)置cookie var loginCode = $("#login_code").val(); //獲取用戶(hù)名信息 var pwd = $("#login_password").val(); //獲取登陸密碼信息 var checked = $("[name='checkbox']:checked");//獲取“是否記住密碼”復(fù)選框 if(checked){ //判斷是否選中了“記住密碼”復(fù)選框 $.cookie("login_code",loginCode);//調(diào)用jquery.cookie.js中的方法設(shè)置cookie中的用戶(hù)名 $.cookie("pwd",$.base64.encode(pwd));//調(diào)用jquery.cookie.js中的方法設(shè)置cookie中的登陸密碼,并使用base64(jquery.base64.js)進(jìn)行加密 }else{ $.cookie("pwd", null); } } function getCookie(){ //獲取cookie var loginCode = $.cookie("login_code"); //獲取cookie中的用戶(hù)名 var pwd = $.cookie("pwd"); //獲取cookie中的登陸密碼 if(pwd){//密碼存在的話(huà)把“記住用戶(hù)名和密碼”復(fù)選框勾選住 $("[name='checkbox']").attr("checked","true"); } if(loginCode){//用戶(hù)名存在的話(huà)把用戶(hù)名填充到用戶(hù)名文本框 $("#login_code").val(loginCode); } if(pwd){//密碼存在的話(huà)把密碼填充到密碼文本框 $("#login_password").val($.base64.decode(pwd)); } } function login(){ var userName = $('#login_code').value; if(userName == ''){ alert("請(qǐng)輸入用戶(hù)名。"); return; } var userPass = $('#login_password').value; if(userPass == ''){ alert("請(qǐng)輸入密碼。"); return; } //判斷是否選中復(fù)選框,如果選中,添加cookie if($("[name='checkbox']").attr("checked","true")){ //添加cookie setCookie(); alert("記住密碼登錄。"); window.location = "http://www.baidu.com"; }else{ alert("不記密碼登錄。"); window.location = "http://www.baidu.com"; } } </script> </head> <body onload="getCookie();"> <center> <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;"> <tr> <td align="center" colspan="2">歡迎登錄</td> </tr> <tr> <td align="right"> <label>用戶(hù)名:</label> </td> <td align="left"> <input type="text" id="login_code" name="login_code" style="width:160px; margin-left:10px;" /> </td> </tr> <tr> <td align="right"> <label>密 碼:</label> </td> <td align="left"> <input type="password" id="login_password" name="login_password" style="width:160px; margin-left:10px;" /> </td> </tr> <tr> <td align="center" colspan="2"> <span style="font-size:12px; color:blue; vertical-align:middle;">是否記住密碼</span> <input type="checkbox" style="vertical-align:middle;" /> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="login();"/> </td> </tr> </table> </center> </body> </html>
總結(jié)
以上所述是小編給大家介紹的通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶(hù)名、密碼登錄功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
用jQuery模擬頁(yè)面加載進(jìn)度條的實(shí)現(xiàn)代碼
因?yàn)槲覀儫o(wú)法通過(guò)任何方法獲取整個(gè)頁(yè)面的大小和當(dāng)前加載了多少,所以想制作一個(gè)加載進(jìn)度條的唯一辦法就是模擬。那要怎么模擬呢2011-12-12jquery如何實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)
實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)的方法有很多,在接下來(lái)的文章中為大家介紹下,jquery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-12-12基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效,圖片輪播效果特別適合做產(chǎn)品展示,感興趣的小伙伴可以參考下。2015-11-11深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對(duì)jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
考慮到用戶(hù)體驗(yàn),當(dāng)用戶(hù)關(guān)閉tab時(shí),自動(dòng)切換到前一個(gè)tab不至于讓用戶(hù)看到空的界面。2010-07-07TextArea不支持maxlength的解決辦法(jquery)
自己寫(xiě)了一個(gè)jquery的擴(kuò)展,這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。2011-09-09