js中记住密码功能(在前端实现)
直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式)
Jsp代码:
<form class="am-form tpl-form-line-form" id="loginForm" action="<c:url value='/user_login.action'/>" method="post"> <div class="am-form-group"> <input type="text" class="tpl-form-input" name="username" id="username" placeholder="请输入账号" autofocus> </div> <div class="am-form-group"> <input type="password" class="tpl-form-input" name="password" id="password" placeholder="请输入密码"> </div> <div class="am-form-group tpl-login-remember-me"> <input id="remember-me" type="checkbox"> <label for="remember-me"> 记住密码 </label> </div> <div class="am-form-group tpl-login-remember-me"> <label for="remember-me"> 合作账号登录: </label> <a href="http://www.qq.com/" class="am-icon-qq am-icon-btn am-primary"></a> <a href="https://wx.qq.com/" class="am-icon-weixin am-icon-btn am-success"></a> <a href="http://weibo.com/login.php" class="am-icon-weibo am-icon-btn am-danger"></a> </div> <div class="am-form-group"> <button type="submit" class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">登录</button> </div> </form>
Js代码:
<script> // 得到cookie function getCookie(c_name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "="); if (c_start != -1) { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexOf(";", c_start); if (c_end == -1) c_end = document.cookie.length; return unescape(document.cookie.substring(c_start, c_end)); } } return ""; } // 删除cookie function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(name); if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); } // 设置cookie function setCookie(c_name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); } // 判断复选框是否选中 function isChecked(bool) { if (bool) { var password = $("#password").val(); setCookie("password", password, 10); } else { delCookie("password"); } } $(function() { // 设置复选框点击事件 $("#remember-me").click(function() { var bool = $("#remember-me").prop("checked"); isChecked(bool); }); /*Map<String(Cookie名称),Cookie(Cookie本身)>*/ // 获取cookie中的用户名 var username = window.decodeURI("${cookie.username.value}"); if ("${requestScope.user.username}") { username = "${requestScope.user.username}"; } $("#username").val(username); // 获取cookie中的密码 var password = getCookie("password"); if ("${requestScope.user.password}") { password = "${requestScope.user.password}"; } $("#password").val(password); // 密码框加载完毕就要判断复选框 var bool = $("#remember-me").prop("checked"); isChecked(bool); }); </script>
参考教程:w3school的js操作cookie教程