H5localStorage實現記住密碼！！！！

時間 2019-12-09

標籤 h5localstorage 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>
===========

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。