H5localStorage实现记住密码!!!!

1
sessionStorage只能保存临时会话数据 可以使用localStorage对象,长期保存在客户端,直到人工清除为止
1: localStorage.getItem();//读取 2: localStorage.removeItem();//移除 例子说明 创建一个登陆界面,当但就按钮后,localStorage会保存登陆时的用户名,如果选中保存密码的复选框 ,则保存登陆时的密码,否则清空 HTML代码 <body onload="pageload();"> <!--因为涉及到用户,就要用表单--> <form id="frmLogin" action="#"> <fieldset> <legend>用户登录</legend> <ul> <li class="li_top"> <span id="spnStatus">eeddd</span><!--显示登录成功的文字--> </li> <!--用户名--> <li>用户: <input id="txtName" class="inputtxt" type="text" size="18"> </li> <!--密码--> <li>密码: <input id="txtPass" class="inputtxt" type="password" size="18"> </li> <li class="li_bot"> <input id="chkSave" type="checkbox"> 保存密码? </li> <li class="li_bot"> <input name="btnLogin" class="inputbtn" type="button" value="登录" onclick="btnLogin_click();"> <input name="rstLogin" class="inputbtn" type="reset" value="取消" /> </li> </ul> </fieldset> </body> =============== js代码 <script type="text/javascript"> //获取id的方法 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";//把id名转成class,改变样式 var c="登录成功"; $$("spnStatus").innerHTML=c; alert(c); } </script> ================= css代码 <style type="text/css"> ul{ list-style:none; padding:0px; margin:15px 0px 15px 0px; text-align:center; } ul .li_bot{ padding-top:10px; margin-left:36px; } ul .li_top{ padding-bottom:10px; } .inputtxt{ border:1px solid #ccc; line-height:18px; font-size:12px; padding-left:3px; margin-bottom:5px; } /*显示登录成功的界面*/ #spnStatus{ display:none; border:1px #ccc solid; width:158px; background-color:#eee; padding:6px 12px 6px 12px; margin-left:2px; } .status{ border:1px #ccc solid; background-color:#eee; padding:6px 12px 6px 12px; } </style> ===========

 

posted @ 2017-07-28 10:58  DoubleLife  阅读(2962)  评论(0编辑  收藏  举报