H5保存和读取登录用户名和密码

最新推荐文章于 2025-10-06 12:52:49 发布

原创最新推荐文章于 2025-10-06 12:52:49 发布 · 1.5w 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML5 localStorage实现登录用户名和密码保存的示例。当用户登录并选择保存密码时，localStorage将保存用户名和密码，下次访问时自动填充。通过JavaScript进行操作，包括获取和设置localStorage数据，以及在页面加载时恢复输入字段的值。当用户取消保存密码，localStorage会移除相应数据。登录成功后，页面会显示相应提示。

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>
===========
问题:
为什么显示不出登陆成功的？
解决：