js cookie实现记住密码功能
本文为大家分享了js和jQuery记住密码功能的方法,具体如下
一.js实现记住密码功能
html:
<formid="form22"name="form22"action="checklogin.action"method="post"> <divclass="username"style="margin-top:50px;"> <label>用户名:</label> <inputtype="text"name="username"id="userName"/> <spanid="myuser"style="color:red;font-size:12px;font-weight:normal;"></span> </div> <divclass="password"> <label>密 码:</label> <inputname="password"id="passWord"type="password"/> <spanid="mypass"style="color:red;font-size:12px;font-weight:normal;"></span> </div> <divclass="user_type"> <label> </label> <inputtype="checkbox"id="saveUserName"style="float:left;margin-top:3px;"/> <span>记住用户</span> </div> <inputtype="button"value=""class="btn_login"id="btn_login"onclick="checkform();"/> </form>
cookie.js:
functionsetCookie(name,value){ varDays=30;//此cookie将被保存30天 varexp=newDate(); exp.setTime(exp.getTime()+1000); if(value==""||value=="null" ||value=="null"||value==""){ }else{ document.cookie=name+"="+escape(value)+";expires=Sun,17-Jan-203819:14:07GMT"; } } functiongetCookie(sName){ varaCookie=document.cookie.split(";"); for(vari=0;i<aCookie.length;i++) { varaCrumb=aCookie[i].split("="); if(sName==aCrumb[0]) { returnaCrumb[1]; } } returnnull; } functioncheckCookieExist(name){ if(getCookie(name)) returntrue; else returnfalse; } functiondeleteCookie(name,path,domain){ varstrCookie; //检查Cookie是否存在 if(checkCookieExist(name)){ //设置Cookie的期限为己过期 strCookie=name+"="; strCookie+=(path)?";path="+path:""; strCookie+=(domain)?";domain="+domain:""; strCookie+=";expires=Thu,01-Jan-7000:00:01GMT"; document.cookie=strCookie; } } functionsaveCookie(name,value,expires,path,domain,secure){ varstrCookie=name+"="+value; if(expires){ //计算Cookie的期限,参数为天数 varcurTime=newDate(); curTime.setTime(curTime.getTime()+expires*24*60*60*1000); strCookie+=";expires="+curTime.toGMTString(); } //Cookie的路径 strCookie+=(path)?";path="+path:""; //Cookie的Domain strCookie+=(domain)?";domain="+domain:""; //是否需要保密传送,为一个布尔值 strCookie+=(secure)?";secure":""; document.cookie=strCookie; }
login.js
window.onload=function(){ //console.log("ctx:"+"${ctx}"); varname=getCookie("loginUserName"); document.getElementById("passWord").value=""; if(name!=null&&name!=""){ document.getElementById("userName").value=name; document.getElementById("passWord").focus(); }else{document.getElementById("userName").focus(); } } functioncheckform(){ ...... varisChecked=document.getElementById("saveUserName").checked; if(isChecked){ setCookie("loginUserName",userName); } ...... }
二.jquery实现记住密码功能
参考:http://www.cnblogs.com/lindaZ/p/5069981.html
html:
<formclass="form-signin"> <inputtype="text"id="username"name="account"autofocusrequiredplaceholder="用户名"class="form-control"style="width:250px;margin-bottom:5px;"> <inputtype="password"id="password"name="password"requiredplaceholder="密码"class="form-control"style="width:250px;"> <br/> <inputid="remember_me"type="checkbox"name="remember_me"onkeydown="check_enter(event)"style="width:250;"> <spanfor="remember_me"onkeydown="check_enter(event)"style="width:250px">记住我</span> <br/><br/> <spanclass="btnbtn-lgbtn-primarybtn-block">登录</span> </form> <scriptsrc="jquery.js"type="text/javascript"></script>
<scriptsrc="jquery.cookie.js"type="text/javascript"></script>
判断checkbox是否被选中,若选中,则将存储cookie:
if($("#remember_me").attr("checked")){ $.cookie("rmbUser","true",{expires:7});//存储一个带7天期限的cookie $.cookie("username",account,{expires:7}); $.cookie("password",password,{expires:7}); } else{ $.cookie("rmbUser","false",{expire:-1}); $.cookie("username","",{expires:-1}); $.cookie("password","",{expires:-1}); }
在每次刷新登录页面加载js时,取出cookie中的用户名和密码,若cookie不为空,用户名和密码输入框被cookie里面的内容填充,复选框设为勾上状态:
$().ready(function(){ //获取cookie的值 varusername=$.cookie('username'); varpassword=$.cookie('password'); //将获取的值填充入输入框中 $('#username').val(username); $('#password').val(password); if(username!=null&&username!=''&&password!=null&&password!=''){ //选中保存秘密的复选框 $("#remember_me").attr('checked',true); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。