# 记住用户名功能
~~~
<!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>
~~~
