js实现cookie记住密码

Posted sweeeper

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现cookie记住密码相关的知识，希望对你有一定的参考价值。

近来做记住密码时，用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


以上是关于js实现cookie记住密码的主要内容，如果未能解决你的问题，请参考以下文章

通过js来设置cookie和读取cookie，实现登陆时记住密码的功能

Java实现登录时cookie记住密码

使用cookie完成一个记住密码的功能

使用cookie完成一个记住密码的功能

vue实现登录，记住密码功能（cookie）

vue中使用cookies和crypto-js实现记住密码和加密