javascript记住用户名和登录密码（两种方式）
下面主要通过代码给大家展示下javascript记住用户名和登录密码，具体代码内容请看下文。
第一种方式：
CONTENT
login.html
welcome.html
cookie.js
common.js
login.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>login</title> <scripttype="text/javascript"src="cookie.js"></script> <scripttype="text/javascript"src="common.js"></script> </head> <body> <formaction=""> <p> <span>UserName:</span> <inputid="userName"type="text"value=""/></p> <p> <span>Password:</span> <inputid="password"type="password"value=""/></p> <p> <spanstyle="font-size:12px;color:blue;">记住密码</span> <inputid="saveCookie"type="checkbox"value=""/></p> <p> <inputid="submit"type="button"value="GO"/> </p> </form> </body> </html>
welcome.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>welcome</title>
</head>
<body>
<h1>Welcome!</h1>
<ahref="login.html">点击返回登陆框</a>
</body>
</html>
cookie.js
//新建cookie。
//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。
functionsetCookie(name,value,hours,path){
varname=escape(name);
varvalue=escape(value);
varexpires=newDate();
expires.setTime(expires.getTime()+hours*3600000);
path=path==""?"":";path="+path;
_expires=(typeofhours)=="string"?"":";expires="+expires.toUTCString();
document.cookie=name+"="+value+_expires+path;
}
//获取cookie值
functiongetCookieValue(name){
varname=escape(name);
//读cookie属性，这将返回文档的所有cookie
varallcookies=document.cookie;
//查找名为name的cookie的开始位置
name+="=";
varpos=allcookies.indexOf(name);
//如果找到了具有该名字的cookie，那么提取并使用它的值
if(pos!=-1){//如果pos值为-1则说明搜索"version="失败
varstart=pos+name.length;//cookie值开始的位置
varend=allcookies.indexOf(";",start);//从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
if(end==-1)end=allcookies.length;//如果end值为-1说明cookie列表里只有一个cookie
varvalue=allcookies.substring(start,end);//提取cookie的值
return(value);//对它解码
}
elsereturn"";//搜索失败，返回空字符串
}
//删除cookie
functiondeleteCookie(name,path){
varname=escape(name);
varexpires=newDate(0);
path=path==""?"":";path="+path;
document.cookie=name+"="+";expires="+expires.toUTCString()+path;
}
common.js
function$(objStr){returndocument.getElementByIdx_x_x(objStr);}
window.onload=function(){
//分析cookie值，显示上次的登陆信息
varuserNameValue=getCookieValue("userName");
$("userName").value=userNameValue;
varpasswordValue=getCookieValue("password");
$("password").value=passwordValue;
//写入点击事件
$("submit").onclick=function()
{
varuserNameValue=$("userName").value;
varpasswordValue=$("password").value;
//服务器验证（模拟）
varisAdmin=userNameValue=="admin"&&passwordValue=="123456";
varisUserA=userNameValue=="userA"&&passwordValue=="userA";
varisMatched=isAdmin||isUserA;
if(isMatched){
if($("saveCookie").checked){
setCookie("userName",$("userName").value,24,"/");
setCookie("password",$("password").value,24,"/");
}
alert("登陆成功,欢迎你,"+userNameValue+"!");
self.location.replace("welcome.html");
}
elsealert("用户名或密码错误，请重新输入！");
}
}
第二种方式：
<scripttype="text/javascript">
window.onload=functiononLoginLoaded(){
if(isPostBack=="False"){
GetLastUser();
}
}
functionGetLastUser(){
varid="49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符
varusr=GetCookie(id);
if(usr!=null){
document.getElementById('txtUserName').value=usr;
}
else{
document.getElementById('txtUserName').value="001";
}
GetPwdAndChk();
}
//点击登录时触发客户端事件
functionSetPwdAndChk(){
//取用户名
varusr=document.getElementById('txtUserName').value;
alert(usr);
//将最后一个用户信息写入到Cookie
SetLastUser(usr);
//如果记住密码选项被选中
if(document.getElementById('chkRememberPwd').checked==true){
//取密码值
varpwd=document.getElementById('txtPassword').value;
alert(pwd);
varexpdate=newDate();
expdate.setTime(expdate.getTime()+14*(24*60*60*1000));
//将用户名和密码写入到Cookie
SetCookie(usr,pwd,expdate);
}
else{
//如果没有选中记住密码,则立即过期
ResetCookie();
}
}
functionSetLastUser(usr){
varid="49BAC005-7D5B-4231-8CEA-16939BEACD67";
varexpdate=newDate();
//当前时间加上两周的时间
expdate.setTime(expdate.getTime()+14*(24*60*60*1000));
SetCookie(id,usr,expdate);
}
//用户名失去焦点时调用该方法
functionGetPwdAndChk(){
varusr=document.getElementById('txtUserName').value;
varpwd=GetCookie(usr);
if(pwd!=null){
document.getElementById('chkRememberPwd').checked=true;
document.getElementById('txtPassword').value=pwd;
}
else{
document.getElementById('chkRememberPwd').checked=false;
document.getElementById('txtPassword').value="";
}
}
//取Cookie的值
functionGetCookie(name){
vararg=name+"=";
varalen=arg.length;
varclen=document.cookie.length;
vari=0;
while(i<clen){
varj=i+alen;
//alert(j);
if(document.cookie.substring(i,j)==arg)returngetCookieVal(j);
i=document.cookie.indexOf("",i)+1;
if(i==0)break;
}
returnnull;
}
varisPostBack="<%=IsPostBack%>";
functiongetCookieVal(offset){
varendstr=document.cookie.indexOf(";",offset);
if(endstr==-1)endstr=document.cookie.length;
returnunescape(document.cookie.substring(offset,endstr));
}
//写入到Cookie
functionSetCookie(name,value,expires){
varargv=SetCookie.arguments;
//本例中length=3
varargc=SetCookie.arguments.length;
varexpires=(argc>2)?argv[2]:null;
varpath=(argc>3)?argv[3]:null;
vardomain=(argc>4)?argv[4]:null;
varsecure=(argc>5)?argv[5]:false;
document.cookie=name+"="+escape(value)+((expires==null)?"":(";expires="+expires.toGMTString()))+((path==null)?"":(";path="+path))+((domain==null)?"":(";domain="+domain))+((secure==true)?";secure":"");
}
functionResetCookie(){
varusr=document.getElementById('txtUserName').value;
varexpdate=newDate();
SetCookie(usr,null,expdate);
}
</script>
</head>
<body>
<formid="form1">
<div>
用户名:<inputtype="text"ID="txtUserName"onblur="GetPwdAndChk()">
<inputtype="password"ID="txtPassword">
密码：
<inputtype="checkbox"ID="chkRememberPwd"/>
记住密码
<inputtype="button"OnClick="SetPwdAndChk()"value="进入"/>
</div>
</form>
</body>
以上就是用两种方式展示javascript记住用户名和登录密码的全部代码，没有来得及整理运行效果图，希望大家能够喜欢。