JavaScript密码记住功能

最新推荐文章于 2022-12-06 15:57:58 发布

原创最新推荐文章于 2022-12-06 15:57:58 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

之前需要写一个用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="登录成功！";
			
			}

效果图如下显示：