嗨客网搜索
Java Cookie记住账号密码

描述

使用 Cookie 对象,实现记住账号密码,下次登录时自动登录。

题目

使用 Cookie 对象,实现记住账号密码,下次登录时自动登录。

题目解决思路

  1. 使用 @WebServlet 注解的方式创建 Servlet
  2. 当用户选择记住我的选项后,而且登录成功,则将用户信息存入到浏览器的 Cookie 中。
  3. 当用户登录失败,则跳转错误界面。
  4. 若登录成功并选择了记住密码,则下次自动登录。

代码具体实现

登录界面代码:

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>用户登录</title> <!--导入js文件--> <script src="js/commons.js"></script> </head> <body> <h2>用户登录</h2> <form action="login" method="post" id="loginForm"> <table> <tr> <td width="60">用户名</td> <td><input type="text" name="username" id="username"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" id="password"/></td> </tr> <tr> <td>记住我</td> <!--没有value属性的前提下,点中它的值是on,没有选中值是null --> <td><input type="checkbox" name="remember"/></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="登录"/></td> </tr> </table> </form> </body> </html>

登录成功界面代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录成功</title> </head> <body> 嗨客网(www.haicoder.net)<br/> <h2>登录成功,欢迎你!</h2> </body> </html>

登录失败界面代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录失败</title> </head> <body> 嗨客网(www.haicoder.net)<br/> <h2>登录失败</h2> <a href="login.html">请重试</a> </body> </html>

commons.js 代码

//页面加载完毕以后执行 window.onload = function () { //读取浏览器端的cookie,读取用户名和密码 let username = getCookieValue("username"); let password = getCookieValue("password"); //判断用户名和密码是否有值 if (username!="" && password!="") { //如果有值就把表单中设置用户名和密码 document.getElementById("username").value = username; document.getElementById("password").value = password; //提交表单 document.getElementById("loginForm").submit(); } } /* 编写方法,通过键获取Cookie的值 */ function getCookieValue(name) { //1.读取浏览器端的所有的Cookie,返回字符串 let cookies = document.cookie; //2.判断cookie是否是空串 if (cookies != "") { //得到:username=admin; password=123 //按分号拆分 let arr = cookies.split(";"); //遍历每个元素 for (let cookie of arr) { //按等号拆分 let strings = cookie.split("="); //表示键 let key = strings[0].trim(); //表示值 let value = strings[1].trim(); //查找name是否与key相同,如果相同就返回value if (key == name) { return value; } } } //没有找到,返回空串 return ""; }

LoginServlet 代码:

@WebServlet("/login") public class LoginServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); // 获取用户输入 String username = request.getParameter("username"); String password = request.getParameter("password"); // 登录 if("haicoder".equals(username) && "123".equals(password)){ String remember = request.getParameter("remember"); if(remember != null){ Cookie cookie1 = new Cookie("username",username); Cookie cookie2 = new Cookie("password",password); response.addCookie(cookie1); response.addCookie(cookie2); } // 登录成功 response.sendRedirect("success.html"); }else{ // 登录失败 response.sendRedirect("failure.html"); } } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }

启动项目,浏览器访问登录界面,如下图

09_Java Cookie.png

登录失败,如下图:

10_Java Cookie.png

若登录失败,则不会添加 Cookie 到浏览器,如下图:

11_Java Cookie.png

再次登录,如下图:

12_Java Cookie.png

登录成功,如下图:

13_Java Cookie.png

登录成功,则会添加 Cookie 到浏览器,如下图:

14_Java Cookie.png

下次再次登录,则会自动登录,如下图:

15_Java Cookie.png

以上案例使用 Cookie 对象,实现首次登录成功记住密码,则下次自动登录的功能。

嗨客网顶部