這篇文章主要介紹如何通過jquery.cookie.js實現記住用戶名、密碼登錄功能,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創新互聯建站是一家集網站建設,東至企業網站建設,東至品牌網站建設,網站定制,東至網站建設報價,網絡營銷,網絡優化,東至網站推廣為一體的創新建站企業,幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們為更多的企業打造出實用型網站。
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發網站。
Cookies
定義:讓網站服務器把少量數據儲存到客戶端的硬盤或內存,從客戶端的硬盤讀取數據的一種技術;
下載與引入: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.添加一個"會話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');
5.刪除cookie
.cookie('the_cookie', null); //通過傳遞null作為cookie的值即可
6.可選參數
$.cookie('the_cookie','the_value',{ expires:7, path:'/', domain:'jquery.com', secure:true })
expires:(Number|Date)有效期;設置一個整數時,單位是天;也可以設置一個日期對象作為Cookie的過期日期;
path:(String)創建該Cookie的頁面路徑;
domain:(String)創建該Cookie的頁面域名;
secure:(Booblean)如果設為true,那么此Cookie的傳輸會要求一個安全協議,例如:HTTPS;
代碼示例:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</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(){ //設置cookie var loginCode = $("#login_code").val(); //獲取用戶名信息 var pwd = $("#login_password").val(); //獲取登陸密碼信息 var checked = $("[name='checkbox']:checked");//獲取“是否記住密碼”復選框 if(checked){ //判斷是否選中了“記住密碼”復選框 $.cookie("login_code",loginCode);//調用jquery.cookie.js中的方法設置cookie中的用戶名 $.cookie("pwd",$.base64.encode(pwd));//調用jquery.cookie.js中的方法設置cookie中的登陸密碼,并使用base64(jquery.base64.js)進行加密 }else{ $.cookie("pwd", null); } } function getCookie(){ //獲取cookie var loginCode = $.cookie("login_code"); //獲取cookie中的用戶名 var pwd = $.cookie("pwd"); //獲取cookie中的登陸密碼 if(pwd){//密碼存在的話把“記住用戶名和密碼”復選框勾選住 $("[name='checkbox']").attr("checked","true"); } if(loginCode){//用戶名存在的話把用戶名填充到用戶名文本框 $("#login_code").val(loginCode); } if(pwd){//密碼存在的話把密碼填充到密碼文本框 $("#login_password").val($.base64.decode(pwd)); } } function login(){ var userName = $('#login_code').value; if(userName == ''){ alert("請輸入用戶名。"); return; } var userPass = $('#login_password').value; if(userPass == ''){ alert("請輸入密碼。"); return; } //判斷是否選中復選框,如果選中,添加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" > <tr> <td align="center" colspan="2">歡迎登錄</td> </tr> <tr> <td align="right"> <label>用戶名:</label> </td> <td align="left"> <input type="text" id="login_code" name="login_code" /> </td> </tr> <tr> <td align="right"> <label>密 碼:</label> </td> <td align="left"> <input type="password" id="login_password" name="login_password" /> </td> </tr> <tr> <td align="center" colspan="2"> <span >是否記住密碼</span> <input type="checkbox" /> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="login();"/> </td> </tr> </table> </center> </body> </html>
以上是“如何通過jquery.cookie.js實現記住用戶名、密碼登錄功能”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!
名稱欄目:如何通過jquery.cookie.js實現記住用戶名、密碼登錄功能
文章鏈接:http://m.newbst.com/article34/pepdpe.html
成都網站建設公司_創新互聯,為您提供網站改版、營銷型網站建設、網站維護、手機網站建設、做網站、虛擬主機
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯