本文参考https://www.cnblogs.com/zoie-blog/p/6905467.html一文写出
代码中的js部分基本上是参考的该博主的,仅将保存用户名部分放入了
$("#remember").change(function(){
}
中,这样才能实现点击记录
<html>
<body>
<img src="${ctx}/assets/admin/login/img/banner_textfree.jpg" alt="">
<div class="loginBox">
<div class="loginBox_h">登录</div>
<div class="c-red loginTip"></div>
<div class="iptbox">
<div id="login_content">
<form id="login-form" action="login.html" method="post">
<div class="login_ipt userName">
<input type="text" placeholder="请输入渠道编号" id="username" value="${username!}"
name="username" autocomplete="off">
</div>
<div class="login_ipt passWord">
<input type="hidden" name="md5password" id="md5password" value=""><!--这个放在账号和密码之间,让浏览器不会自动记住密码-->
<input type="password" placeholder="请输入密码" id="password" name="password" autocomplete="off"
value="">
</div>
<div class="login_text">
<input class="code text" name="verifyCode" id="verifyCode" type="text" maxlength="8" size="8"
autocomplete="off" placeholder="验证码" value=""
style="width:65%;height:35px;border:1px solid #ddd;padding-left:12px;">
<span><img src="admin/verifyCode/getCode.html" alt="点击刷新" title="点击刷新" class="veryfy_img"
width="77" height="30" id="verifyImage"></span>
</div>
<div class="mb-15 mt-15">
<input type="checkbox" id="remember"><label for="remember" class="login_label">记住登录名</label>
</div>
<div class="login_bar">
<button id="btn-login" type="button" class="sub"
style="width:100%; height:42px; font-size:16px; background:#2483c6; border:none; color:#fff; margin-top:15px;">
登 录
</button>
<label id="errorMessage" class="form-group has-error" style="width: 210px;">${message!}</label>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//判断是否存在过用户
console.log("载入用户名");
var storage = window.localStorage;
if("yes" == storage["isstorename"]){
$("#remember").attr("checked", true);
$("#username").val(storage["username"]);
}
</script>
<script type="text/javascript">
//判断是否保存用户名
var storage = window.localStorage;
$("#remember").change(function(){
if ($("#remember").is(':checked')) {
//存储到loaclStage
storage["username"] = $("#username").val();
storage["isstorename"] = "yes";
console.log("保存用户名");
} else {
storage["username"] = "";
storage["isstorename"] = "no";
console.log("未保存用户名");
}
});
</script>
</body>
</html>