# 記住用戶名功能
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var nameObj=null;
var ckObj =null;
//1.點擊登錄按鈕，如果記住用戶名是選中的，應該記錄用戶名；
//否則就不記錄。
//2.第二次再加載這個頁面，從localstrorg去讀取保存的值
function page_load()
{
nameObj=document.getElementById("name");
ckObj =document.getElementById("ck");
//1.加載時去從localstrorg去讀取保存的值
var nameValue=localStorage.getItem("username");
var ckValue=localStorage.getItem("flag");
//如果取出的值不為空
if(nameValue!=null)
{
nameObj.value=nameValue;
}
if(ckValue!=null)
{
ckObj.checked=true;
}
}
function btn_click()
{
//1.判斷用戶登錄。登錄成功后，再記錄保存數據
//2.登錄成功后，再判斷是否勾選用戶名
//點擊按鈕，獲取用戶輸入的值
var pwdObj=document.getElementById("pwd");
var name=nameObj.value;
var pwd=pwdObj.value;
console.log(name+"-->"+pwd);
//2.進行登錄的業務邏輯判斷
if(name=="李欣"&&pwd=="123456")
{
if(ckObj.checked)
{
//保存用戶姓名到本地緩存
localStorage.setItem("username",name);
localStorage.setItem("flag",true);
//
//localStorage.removeItem()
}
//跳轉頁面
window.location.href="ch5.html";
}
else{
window.alert("登錄失敗!");
nameObj.value="";
pwdObj.value="";
nameObj.autofocus=true;
}
}
</script>
</head>
<body onload="page_load()" >
<input type="text" id="name" placeholder="用戶姓名:" />
<p>
<input type="text" id="pwd" placeholder="用戶密碼:" />
<p>
<input id="ck" type="checkbox" name="ck" value="rember" />記住用戶名
<p>
<button onclick="btn_click()">用戶登錄</button>
</body>
</html>
~~~
