<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.log-box{
margin-top: 10%;
}
</style>
</head>
<body>
<div class="container">
<div class="row log-box">
<div class=" col-md-4 col-md-offset-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">请输入用户名和密码</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="input-name">用户名</label>
<input type="text" class="form-control" id="input-name" placeholder="Email or UserName">
</div>
<div class="form-group">
<label for="inpu-password">密码</label>
<input type="password" class="form-control" id="inpu-password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input id="remember-me" type="checkbox"> 记住我
</label>
<label>
<input id="remove-me" type="checkbox"> 清除
</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
function remember_me(){
// 绑定 element 改变事件
document.getElementById("remember-me").onchange = function (event) {
// 获取到 input 输入的值
var user_name = document.getElementById("input-name").value;
// 把数据存储到本地
localStorage.setItem("user-name", user_name)
};
document.getElementById("remove-me").onchange = function (event) {
// 清除 input 标签的内容，并清除本地存储的所有数据
document.getElementById("input-name").value="";
localStorage.clear();
};
// 判断本地存储中是否已经有用户名，假如有，就把此值填充到页面的 input 内
if (localStorage.getItem("user-name")){
document.getElementById("input-name").value = localStorage.getItem("user-name");
}
}
// 执行函数
remember_me();
</script>
</html>
