JavaEE Cookie

描述

使用 Cookie 对象，实现登录模块的记住账号、密码的功能。

题目

使用 Cookie 对象，实现登录模块的记住账号、密码的功能。

题目解决思路

使用 @WebServlet 注解的方式创建 Servlet。
当用户选择记住我的选项后，而且登录成功，则将用户信息存入到浏览器的 Cookie 中。
当用户登录失败，则跳转错误界面。

代码具体实现

登录界面代码：

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

前端 commos.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) {
    // 读取浏览器端的所有的Cookie，返回字符串
    let cookies = document.cookie;
    // 判断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 cookie = new Cookie(username,password);
                response.addCookie(cookie);
            }
            // 登录成功
            response.sendRedirect("success.html");
        }else{
            // 登录失败
            response.sendRedirect("failure.html");
        }
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

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

03_Java Cookie.png

登录失败，如下图：

04_Java Cookie.png

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

05_Java Cookie.png

再次登录，如下图：

06_Java Cookie.png

登录成功，如下图：

07_Java Cookie.png

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

08_Java Cookie.png

以上案例使用 Cookie 对象，实现登录模块的记住账号、密码的功能。