週記(cookie記住密碼功能)
阿新 • • 發佈：2019-01-31
登入中有一個記住密碼的功能，這個專案是一個區域網專案，安全性要求不是很高，就準備把密碼記錄在本地的cookie中了，這裡先了解了下cookie以及js對cookie操作，專案的程式碼
var b = new Base64(); function getCookie(name){ var c = document.cookie; name = b.encode(name); if(c.length>0){ var val_s = c.indexOf(name+"="); if(val_s!=-1){ val_s = val_s + name.length + 1; val_e = c.indexOf(";",val_s); return b.decode(unescape(c.substring(val_s, val_e))); } } return ""; } function setCookie(name,value,time){ var date = new Date(); var exp = ";expires="; name = b.encode(name); if(time==undefined||time==null||time<=0||isNaN(time)){ date.setDate(date.getDate() - 1); //清除cookie }else{ date.setDate(date.getDate() + time); } document.cookie=name + "=" +b.encode(escape(value)) + exp + date.toGMTString(); }
這裡只是簡單的操作了下cookie，能滿足專案要求，更詳細的cookie操作可以參考：http://www.cnblogs.com/shoupifeng/archive/2011/11/25/2263892.html，其中對於密碼資訊還是做了簡單的加密處理，不能直接把明文密碼放在cookie。這裡使用的是base64可逆加密，頁面中需要引入base64.js檔案，encode()方法對資訊進行加密，decode()方法對資訊進行解密。這裡關於加密處理相關的詳情參考博文：
http://www.cnblogs.com/mofish/archive/2012/02/25/2367858.html
下面是寫的一個登入的demo，供參考學習
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>生產管理中心</title> <style type="text/css"> body{ margin: 0px; width: 100%; height: 100%; } #bgDiv{ width: 100%; height: 100%; background-image: url(bkground.png); background-repeat:no-repeat; background-size:100% 100%; } .loginDiv{ width: 460px; height: 370px; border:1px solid #2a2a29; border-radius:4px; font-family: "微軟雅黑"; letter-spacing:1px; position: relative; top:180px; color:#fff; margin:0 auto; } .innerDiv{ width: 458px; height: 368px; border: 1px solid #575757; border-radius:3px; } .loginHead{ height:35px; text-align: center; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#383838,endColorStr=#262626); /*IE*/ background:-moz-linear-gradient(top,#383838,#262626);/*火狐*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#383838), to(#262626)); padding:10px; font-size: 25px; font-weight: blod; } .loginBody{ height:241px; border-top:1px solid #4a4f54; border-bottom:1px solid #4a4f54; /* background-color: #2d2d2d; */ position: relative; } .loginBody label{ font-size: 18px; display: block; margin: 20px 30px 10px; } .loginBody input{ background-color:#fff; display: block; height: 20px; width:375px; border:1px solid #000; border-radius:5px; color:#999999; font-family: Arial,sans-serif; font-size: 18px; padding:10px 20px; margin-left:15px } .loginBodyBg{ width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1; background-color: #2d2d2d; filter:alpha(opacity=70); /*IE濾鏡，透明度50%*/ -moz-opacity:0.7; /*Firefox私有，透明度50%*/ opacity:0.7; } .bodyContent{ width:100%; height: 100%; z-index:2; position: absolute; top: 0px; left:0px; /* padding: 10px 15px; */ } .loginFoot{ height:50px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#2b2b2f,endColorStr=#1d1d24); /*IE*/ background:-moz-linear-gradient(top,#2b2b2f,#1d1d24);/*火狐*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#2b2b2f), to(#1d1d24)); padding:10px; } .checkbox{ font-size: 18px; position: relative; margin-top: 10px; display: inline-block; } .checkbox:HOVER,.checkbox input[type=checkbox],.lgBtn{ cursor:pointer; color:#ffffee; } .loginFoot input[type=checkbox]{ width: 18px; height: 18px; margin: 0 10px; position: relative; top:3px; } .loginFoot .lgBtn{ float: right; height: 100%; width:160px; border-radius:5px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd)); font-weight: bold; font-size: 22px; color:#444; border: aliceblue; } .lgBtn:ACTIVE { border-style: inset; } #mesFont{ display:block; margin: 8px 30px; color:red; } </style> <script type="text/javascript" src="base64.js"></script> <script type="text/javascript"> var b = new Base64(); function load(){ //設定背景大小 var userAgent = navigator.userAgent; var h1 = document.body.scrollHeight; var h2 = window.screen.height; var bgDiv = document.getElementById("bgDiv"); if(userAgent.indexOf("Chrome") > -1){ bgDiv.style.height= h1+"px"; }else{ bgDiv.style.height= h2+"px"; document.body.style.overflow = "hidden"; } //登入失敗清空記住的密碼 /*if("${LoginMessage}"=="密碼錯誤！"){ setCookie("proCen_password","",0); }else if("${LoginMessage}"=="使用者名稱不存在！"){ setCookie("proCen_password","",0); setCookie("proCen_userNo","",0); setCookie("proCen_rememb","true",0); }*/ //設定記住密碼值 document.getElementById("userNo").value=getCookie("proCen_userNo"); document.getElementById("password").value=getCookie("proCen_password"); if(getCookie("proCen_rememb")!=""){ document.getElementById("rememb").checked="checked"; } } function getCookie(name){ var c = document.cookie; name = b.encode(name); if(c.length>0){ var val_s = c.indexOf(name+"="); if(val_s!=-1){ val_s = val_s + name.length + 1; val_e = c.indexOf(";",val_s); return b.decode(unescape(c.substring(val_s, val_e))); } } return ""; } function setCookie(name,value,time){ var date = new Date(); var exp = ";expires="; name = b.encode(name); if(time==undefined||time==null||time<=0||isNaN(time)){ date.setDate(date.getDate() - 1); //清除cookie }else{ date.setDate(date.getDate() + time); } document.cookie=name + "=" +b.encode(escape(value)) + exp + date.toGMTString(); } </script> </head> <body onload="load()"> <div id="bgDiv"> <div class="loginDiv" id="lgDiv"> <div class="innerDiv"> <form action="login" method="post" onsubmit="return chk(this);"> <div class="loginHead"> <label>生產管理中心</label> </div> <div class="loginBody"> <div class="loginBodyBg"></div> <div class="bodyContent"> <label class="lgLab">使用者名稱</label> <input type="text" name="userNo" id="userNo"/> <label class="lgLab">密碼</label> <input type="password" name="password" id="password"/> <font id="mesFont">使用者名稱錯誤</font> </div> </div> <div class="loginFoot"> <label class="checkbox"><input type="checkbox" id="rememb"/>記住密碼</label> <button class="lgBtn" type="submit" id="submit">登入系統</button> </div> </form> </div> </div> </div> </body> <SCRIPT language=JavaScript type=text/JavaScript> function chk(a) { if (a.userNo.value=="") { alert ("請先輸入賬號"); a.userNo.focus(); return false; } if (a.password.value=="") {alert("請先輸入密碼"); a.password.focus(); return false; } if(a.rememb.checked==true){ setCookie("proCen_userNo",a.userNo.value,10); setCookie("proCen_password",a.password.value,10); setCookie("proCen_rememb","true",10); }else{ setCookie("proCen_userNo",a.userNo.value,0); setCookie("proCen_password",a.password.value,0); setCookie("proCen_rememb","true",0); } a.submit.innerHTML="正在登入中..."; a.submit.disabled=true; a.submit.disabled=true; } if(top.location!=self.location){ top.location = self.location; } </SCRIPT> </html>