通過jquery.cookie.js實現記住使用者名稱、密碼登入功能
阿新 • • 發佈：2019-02-19
注意：需要引入3個js檔案，即jquery.min.js，jquery.cookie.js，jquery.base64.js。<!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" style="margin-top:100px;"> <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" 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>