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>
===========