之前需要写一个用JavaScript表单可以记住密码的功能,在网上找了一圈发现,并没有找到真的可以记住密码的,在这里分享一下自己写的效果功能。
好啦,废话不多说现在我们来看看代码:
先是HTML代码段:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" language="jscript" src="jszh.js" />
</script>
</head>
<body onLoad="pageload();">
<form id="frmLogin" action="Untitled-5.html">
<fieldset>
<legend>登录</legend>
<ul>
<li class="li_top">
<span id="spnStatus"></span>
</li>
<li>名称:
<input id="txtName" class="inputtxt" type="text">
</li>
<li>密码:
<input id="txtPass" class="inputtxt" type="password">
</li>
<li>
<input id="chkSave" type="checkbox">
我确定保存密码!
</li>
<li class="li_bot">
<input name="btnLogin" class="inputbtn" value="登录" type="submit" onClick="btnLogin_click(); ">
<input name="rstLogin" class="inputbtn" type="reset" value="取消">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
然后是在代码段当中链接的jazh.js代码段:
function $$(id){
return document.getElementById(id);
}
function pageload(){
var strName=localStorage.getItem("keyName");
var strPass=localStorage.getItem("keyPass");
if(strName){
$$("txtName").value=strName;
}
if(strPass){
$$("txtPass").value=strPass;
}
}
function btnLogin_click(){
var strName=$$("txtName").value
var strPass=$$("txtPass").value;
localStorage.setItem("keyName",strName);
if($$("chkSave").checked){
localStorage.setItem("keyPass",strPass);
}else{
localStorage.removeItem("keyPass");
}
$$("spnStatus").className="status";
$$("spnStatus").innerHTML="登录成功!";
}
效果图如下显示:
这个就是实现当你关闭浏览器时也不会造成代码没有保存的问题,当你现在确认保存密码,密码就不会丢失。