zoukankan      html  css  js  c++  java
  • 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; 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> ===========
  • 相关阅读:
    WebAPI搭建(一)如何在Webforms 下 搭建WebAPI
    解决VS2010在新建实体数据模型出现“在 .NET Framework Data Provider for Microsoft SQL Server Compact 3.5 中发生错误。请与提供程序供应商联系以解决此问题。”的问题
    ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞
    python中强大的list
    除法运算和四舍五入
    python的基本数学运算
    配置python环境
    唠叨一些关于Python的事情
    人生苦短,我用python
    ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能
  • 原文地址:https://www.cnblogs.com/wenb/p/7249077.html
Copyright © 2011-2022 走看看