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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。