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