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="登录成功!";
			
			}

效果图如下显示:

这个就是实现当你关闭浏览器时也不会造成代码没有保存的问题,当你现在确认保存密码,密码就不会丢失。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值