我們經常能看到網頁在登陸頁面密碼框下面會有一個記住密碼的選項,其實它的實現原理是比較簡單的。基本的原理就是在登陸時將需要保存的內容放到Cookie中,在需要的時候再從Cookie取出來。
前台html代碼:
<div class="container"> <form th:method="POST" th:action="@{/login}" th:object="${user}"> <div class="table-responsive"> <table class="table table-condensed"> <tr th:if="${errMsg != ''}"> <td><span class="text-danger" id="errMsg" th:text="${errMsg}"></span></td> </tr> <tr> <td>用戶名</td> <td> <input type="text" class="form-control" id="username" name="username"> </td> </tr> <tr> <td>密碼</td> <td> <input type="password" class="form-control" id="password" name="password"> </td> </tr> <tr> <td></td> <td><input type="checkbox" id="remember" name="remember">remember password</td> </tr> <tr> <td><input type="submit" id="submit" value="登陸"/></td> </tr> </table> </div> </form> </div>
后台Controller代碼:
@PostMapping(value="login") public String loginCheck(@ModelAttribute("user") User user, Model model , HttpServletRequest request, HttpServletResponse response) { if(user == null) return "nms/login"; if(!"1".equals(user.getUsername()) || !"2023".equals(user.getPassword())) { model.addAttribute("errMsg", "用戶名或密碼不正確。"); return "nms/login"; } if(user.isRemember()) { Cookie ckUsername = new Cookie("nms_username", user.getUsername()); ckUsername.setMaxAge(60*60*24*30); response.addCookie(ckUsername); Cookie ckPassword = new Cookie("nms_password", user.getPassword()); ckPassword.setMaxAge(60*60*24*30); response.addCookie(ckPassword); Cookie ckRemember = new Cookie("nms_remember", "1"); ckRemember.setMaxAge(60*60*24*30); response.addCookie(ckRemember); }else { Cookie[] cookies = request.getCookies(); if(cookies != null) { for(Cookie cookie : cookies) { if("nms_username".equals(cookie.getName()) || "nms_password".equals(cookie.getName()) || "nms_remember".equals(cookie.getName())) { cookie.setMaxAge(0); response.addCookie(cookie); } } } } return "redirect:/nms"; }
前台JavaScript代碼:
var cookies = document.cookie.split(';'); function getCookie(mkey){ for(var i = 0; i < cookies.length; i++){ var kv = cookies[i].split('='); if(kv[0].trim()==mkey){ return kv[1].trim(); } } return ''; } window.onload = function(){ var username = getCookie("nms_username"); var password = getCookie("nms_password"); var remember = getCookie("nms_remember"); if(remember == '1'){ $("#username").val(username); $("#password").val(password); $("#remember").prop("checked", "checked"); } }