碼上歡樂
相關內容    簡體    繁體

js實現cookie記住密碼

本文轉載自   查看原文   2016-10-30 14:10   2525 

近來做記住密碼時，用js的實現方式做了一下。

 

login.jsp頁面代碼

 

[html]  view plain  copy
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";  
  5. %>  
  6.   
  7.   
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  10. <head>  
  11.     <base href="<%=basePath%>" />  
  12.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  13.     <link rel="stylesheet" href="./css/login.css" />  
  14.     <title>登錄</title>  
  15.   
  16.     <!-- 引入js-->  
  17.     <script src="./js/lib/jquery-1.8.0.min.js" type="text/javascript" ></script>    
  18.     <script src="./js/backjs/login.js" type="text/javascript" ></script>    
  19. </head>  
  20.   
  21.   
  22.   
  23. <body>  
  24.     <div class="warp">  
  25.         <img src="./images/bf.png" alt="" />  
  26.         <div class="window">  
  27.             <div class="loginWindow"></div>  
  28.             <div class="loginWindowContent">  
  29.                 <form action="#"  id="loginForm">  
  30.                     <label for="" class="weicome">歡迎登錄xxx系統</label>   
  31.                     <label for="" class="slogan">智能隨行    隨到隨停</label>   
  32.                     <label for="" class="input"> <i> <span></span></i>   
  33.                         <input type="text" placeholder="請輸入用戶名/手機號碼" name="name" id="name" />  
  34.                     </label>   
  35.                     <label for="" class="input" style="margin-top:30px;"> <i><span style="background: url(./images/lock.png) no-repeat;"></span></i>   
  36.                         <input type="password" placeholder="請輸入密碼" name="password" id="password"/>  
  37.                     </label>   
  38.                     <label for="" class="savePass">  
  39.                         <input type="checkbox" value="savePW" name="savePW" id="savePW"/>記住密碼 <a href="home/resetPwdUI">忘記登錄密碼？</a>  
  40.                     </label>   
  41.                     <label for="" class="sub">   
  42.                         <p style="color: red" id="loginMes"></p>  
  43.                         <input type="button" value="登錄" id="login_BTN"/>  
  44.                     </label>   
  45.                     <label for="" class="reg">還不是智停車會員，<a href="home/registerUI"><b>點擊免費注冊</b>>></a></label>  
  46.                 </form>  
  47.             </div>  
  48.         </div>  
  49.   
  50.         <div class="footer">  
  51.   
  52.             <div class="about">  
  53.                 <b><a href="">關於xxx</b>  
  54.             </div>  
  55.         </div>  
  56.     </div>  
  57.   
  58. </body>  
  59. </html>  



 

login.js文件

 

[javascript]  view plain  copy
 
  1. /** 
  2.  * 登錄js 
  3.  */  
  4. $().ready(function(){  
  5.   
  6.     var loginSum = 0;  
  7.       
  8.     //點擊登錄按鈕事件  
  9.     $("#login_BTN").unbind("click");  
  10.     $("#login_BTN").bind("click",function(){  
  11.           
  12.         //修改頁面消息顯示  
  13.         $("#loginMes").text("正在登陸。。。");  
  14.           
  15.           
  16.         //獲取表單數據  
  17.         var data = $("#loginForm");  
  18.         var jsonData = data.serialize();  
  19.         var name = data.find("input[name='name']").val();  
  20.         var password = data.find("input[name='password']").val();  
  21.         var savePW = data.find("input[name='savePW']").val();  
  22.           
  23.         if(name == '' || name == null){  
  24.             $("#loginMes").text("用戶名不能為空");  
  25.             return;  
  26.         };  
  27.         if(password == '' || password == null){  
  28.             $("#loginMes").text("密碼不能為空");  
  29.             return;  
  30.         };  
  31.           
  32.         //判斷重復提交  
  33.         if(loginSum == 1){  
  34.             //重復提交  
  35.             $("#loginMes").text("正在登陸，請稍候");  
  36.             return;  
  37.         };  
  38.         if(loginSum == 0){  
  39.             loginSum = 1;  
  40.         };  
  41.         //提交  
  42.         $.ajax({    
  43.             url:"home/login",    
  44.             type:'POST',    
  45.             data:jsonData,    
  46.             dataType:'json',  
  47.             error:function(){  
  48.                 alert("出錯了！！");  
  49.                 loginSum = 0;  
  50.             },  
  51.             success:function (data){   
  52.                 if(data.code == 0){  
  53.                     //保存密碼  
  54.                     SetPwdAndChk();  
  55.                     $("#loginMes").text("登錄成功，正在跳轉。。。");  
  56.                     window.location.href="main/home";  
  57.                 }else{  
  58.                     $("#loginMes").text("登錄失敗，用戶名或密碼錯誤！");  
  59.                     loginSum = 0;  
  60.                 };  
  61.             }  
  62.         });    
  63.           
  64.     });  
  65.       
  66.     //用戶名失去焦點時調用該方法   
  67.     $("#name").unbind("blur");  
  68.     $("#name").bind("blur",function(){  
  69.         GetPwdAndChk();  
  70.     });  
  71.       
  72.       
  73.       
  74.       
  75.       
  76.       
  77.       
  78.     //=============js cookie===============  
  79.     GetLastUser();  
  80.     function GetLastUser() {  
  81.         var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";  
  82.         var usr = GetCookie(id);  
  83.         if (usr != null) {  
  84.             document.getElementById('name').value = usr;  
  85.         } else {  
  86.             //document.getElementById('name').value = "001";  
  87.         }  
  88.         GetPwdAndChk();  
  89.     };  
  90.     //點擊登錄時觸發客戶端事件   
  91.     function SetPwdAndChk() {  
  92.         //取用戶名   
  93.         var usr = document.getElementById('name').value;  
  94.         //alert(usr);  
  95.         //將最后一個用戶信息寫入到Cookie   
  96.         SetLastUser(usr);  
  97.         //如果記住密碼選項被選中   
  98.         var checked = document.getElementById('savePW').checked;  
  99.         if (checked == true) {  
  100.             //取密碼值   
  101.             var pwd = document.getElementById('password').value;  
  102.             //alert(pwd);  
  103.             var expdate = new Date();  
  104.             expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));  
  105.             //將用戶名和密碼寫入到Cookie   
  106.             SetCookie(usr, pwd, expdate);  
  107.         } else {  
  108.             //如果沒有選中記住密碼,則立即過期   
  109.             ResetCookie();  
  110.         }  
  111.     };  
  112.     function SetLastUser(usr) {  
  113.         var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";  
  114.         var expdate = new Date();  
  115.         //當前時間加上兩周的時間   
  116.         expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));  
  117.         SetCookie(id, usr, expdate);  
  118.     };  
  119.     //用戶名失去焦點時調用該方法   
  120.     function GetPwdAndChk() {  
  121.         var usr = document.getElementById('name').value;  
  122.         var pwd = GetCookie(usr);  
  123.         if (pwd != null) {  
  124.             document.getElementById('savePW').checked = true;  
  125.             document.getElementById('password').value = pwd;  
  126.         } else {  
  127.             document.getElementById('savePW').checked = false;  
  128.             document.getElementById('password').value = "";  
  129.         }  
  130.     };  
  131.     //取Cookie的值   
  132.     function GetCookie(name) {  
  133.         var arg = name + "=";  
  134.         var alen = arg.length;  
  135.         var clen = document.cookie.length;  
  136.         var i = 0;  
  137.         while (i < clen) {  
  138.             var j = i + alen;  
  139.             //alert(j);   
  140.             if (document.cookie.substring(i, j) == arg)  
  141.                 return getCookieVal(j);  
  142.             i = document.cookie.indexOf(" ", i) + 1;  
  143.             if (i == 0)  
  144.                 break;  
  145.         }  
  146.         return null;  
  147.     };  
  148.   
  149.     function getCookieVal(offset) {  
  150.         var endstr = document.cookie.indexOf(";", offset);  
  151.         if (endstr == -1)  
  152.             endstr = document.cookie.length;  
  153.         return unescape(document.cookie.substring(offset, endstr));  
  154.     };  
  155.     //寫入到Cookie   
  156.     function SetCookie(name, value, expires) {  
  157.         var argv = SetCookie.arguments;  
  158.         //本例中length = 3   
  159.         var argc = SetCookie.arguments.length;  
  160.         var expires = (argc > 2) ? argv[2] : null;  
  161.         var path = (argc > 3) ? argv[3] : null;  
  162.         var domain = (argc > 4) ? argv[4] : null;  
  163.         var secure = (argc > 5) ? argv[5] : false;  
  164.         document.cookie = name  
  165.                 + "="  
  166.                 + escape(value)  
  167.                 + ((expires == null) ? "" : ("; expires=" + expires  
  168.                         .toGMTString()))  
  169.                 + ((path == null) ? "" : ("; path=" + path))  
  170.                 + ((domain == null) ? "" : ("; domain=" + domain))  
  171.                 + ((secure == true) ? "; secure" : "");  
  172.     };  
  173.     function ResetCookie() {  
  174.         var usr = document.getElementById('name').value;  
  175.         var expdate = new Date();  
  176.         SetCookie(usr, null, expdate);  
  177.     };  
  178.       
  179.       
  180. });  
  181. 轉自：http://blog.csdn.net/u013614451/article/details/42201799


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 cookie實現記住密碼 Cookie實現記住密碼的功能 如何利用js操作cookie實現記住密碼功能 【原創】js中利用cookie實現記住密碼功能 jquery.cookie.js實現cookie記住用戶名和密碼 通過js來設置cookie和讀取cookie，實現登陸時記住密碼的功能 JavaWeb學習----Cookie實現記住密碼的功能 java實現記住密碼功能(利用cookie) SpringMVC之使用cookie實現記住密碼的功能 SpringBoot利用Cookie實現記住密碼
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM