Cookie实现用户登录记住密码,实现自动登录

什么是Cookie

	在java是一个类,一对键和值组成,键值都是字符串类型,每个cookie只能保存一对键和值.
	每个cookie只能保存最大4K的数据

案列应用

保存用户名和密码在浏览器端,Cookie的数据事保存在本地浏览器的硬盘中,就算计算机关机也会保存,不同浏览器的cookie数据是不能共享的.

数据准备

sql

-- 创建用户表
CREATE TABLE `user`(
	id INT PRIMARY KEY AUTO_INCREMENT,
	username VARCHAR(20),
	PASSWORD VARCHAR(20)	
);

-- 添加一条用户数据
INSERT INTO USER VALUES (NULL,'xiaofu','123');

-- 查询是否有这个用户
SELECT * FROM USER WHERE username = 'xiaofu' AND PASSWORD = '123';

本次案列模拟三层架构,使用maven工程,数据库连接没有使用连接池,用的jdbc,目的是方便演示cookie在本地保存实现账户密码的记录

目录结构

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
  <modelVersion>4.0.0</modelVersion>  
  <groupId>com.fs</groupId>  
  <artifactId>cookie_testLogin</artifactId>  
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
<!--  mysql-->
  <dependencies>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>
<!--    Servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>
<!--    junit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>compile</scope>
    </dependency>
<!--    tomcat-->
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-core</artifactId>
      <version>7.0.47</version>
    </dependency>
  </dependencies>
</project>

dao

public interface UserLogin {
    //根据用户名和密码查询是否有这个用户
    int LoginUser(String username,String password);
}

package com.fs.dao.impl;

import com.fs.dao.UserLogin;

import java.sql.*;

/*
dao实现类,根据用户输入的用户名和密码进行校验将结果返回给业务层,让业务层处理逻辑

我这里就用jdbc做案列
 */
public class UserLoginImpl implements UserLogin {
    @Override
    public int LoginUser(String username, String password) {
        int login = 0;
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        try {
            //注册驱动
            Class.forName("com.mysql.jdbc.Driver");
            //获取连接对象
            connection = DriverManager.getConnection("jdbc:mysql://192.168.93.132:3306/test", "root", "root");
            //获取预编译语句对象
            preparedStatement = connection.prepareStatement("SELECT * FROM user WHERE username = ? AND PASSWORD = ?");
            //对占位符?进行赋值
            preparedStatement.setString(1,username);
            preparedStatement.setString(2,password);
            //执行查询,得到结果集
            resultSet = preparedStatement.executeQuery();
            while (resultSet.next()){
                //如果结果集有查询结果,就将login赋值1,后面对返回值进行判断,是1就说明数据库中有这个用户,就判断登录成功
                login = 1;
            }
        } catch (Exception throwables) {
            throwables.printStackTrace();
        } finally {
            //关闭资源
            try {
                resultSet.close();
                preparedStatement.close();
                connection.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        return login;
    }
}

service

package com.fs.service;

import com.fs.dao.impl.UserLoginImpl;

/*
业务层
 */
public class LoginService {

    /**
     * 调用dao登录查询是否有这个用户,有就返回1
     * @param username 用户名
     * @param password 密码
     * @return 返回1 就表示有这个用户
     */
    public int login(String username,String password){
        //依耐与Dao层
        UserLoginImpl userLogin = new UserLoginImpl();
        int i = userLogin.LoginUser(username, password);
        return i;
    }
}

Servlet

package com.fs.servlet;

import com.fs.service.LoginService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/login")
public class ServletLogin extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //依耐与业务层
        LoginService loginService = new LoginService();
        //从表单提交中获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //调用业务层,判断数据库是否有这个用户名密码
        int login = loginService.login(username, password);
        if (login==1){
            //为1,表示有数据,者登录成功
            //在判断是否勾选了记住密码
            String remember = request.getParameter("remember");
            if (remember!=null) {
                //我们需要实现cookie自动登录就得把用户名和密码创建成cookie,发送给浏览器
                Cookie usernameCookie = new Cookie("username", username);
                Cookie passwordCookie = new Cookie("password", password);
                //设置访问路径和过期的时间,发送给浏览器
                usernameCookie.setPath(request.getContextPath() + "index.html");
                //保存在浏览器端1周
                usernameCookie.setMaxAge(60 * 60 * 24 * 7);
                //添加cookie
                response.addCookie(usernameCookie);

                passwordCookie.setPath(request.getContextPath() + "index.html");
                passwordCookie.setMaxAge(60 * 60 * 24 * 7);
                response.addCookie(passwordCookie);
            }
            //重定向到登录成页面
            response.sendRedirect("success.html");
        }else {
            //重定向到失败页面
            response.sendRedirect("failure.html");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

web页面

index.html

<!DOCTYPE html>
<html lang="en">
<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>
            <tb>用户名:</tb>
            <tb><input type="text" name="username" id="username"/> </tb>
        </tr>
        <tr>
            <tb>密码:</tb>
            <tb><input type="password" name="password" id="password"/> </tb>
        </tr>
        <tr>
            <td>记住密码</td>
<!--                没有value属性的前提下,点中它的值是on,如果没有勾上为null-->
            <td><input type="checkbox" name="remember"/> </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="登录">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
<h2>登录成功,感谢您使用</h2>
</body>
</html>

failure.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录失败</title>
</head>
<body>
<a href="index.html">登录失败,请从新登录</a>
</body>
</html>

commons.js

/**
 * 页面加载完毕后执行
 */
window.onload = function () {
    //从cookie中得到用户名和密码
    let username = getCookie("username");
    let password = getCookie("password");
    //如果字符串不为空，才将数据提交给服务器
    if (username!="" && password!="") {
        //设置文本框的值
        document.getElementById("username").value = username;
        document.getElementById("password").value = password;
    }
}

/**
 * 通过键得到cookie中的值
 */
function getCookie(name) {
    //可以得到当前路径下所有的cookie信息
    let cookie = document.cookie;   //username=xiaofu; password=123
    if (cookie!="") {
        //按分号进行拆分成数组，数组中有2个元素
        let split = cookie.split("; ");
        for (let i = 0; i < split.length; i++) {   //split[0] = "username=admin"   split[1] = "password=123"
            let splitElement = split[i];   //每个元素
            //再按等于号来拆分
            let arr = splitElement.split("=");
            let key = arr[0];  //[0]号元素是username，[1]号元素admin
            let value = arr[1];
            //如果name与key相等，就返回value
            if (key == name) {
                return value;
            }
        }
    }
    return "";  //没有找到
}

---

运行效果

在tomcat中部署项目后,来浏览器端的登录页面

输入用户名密码,登录失败后页面

点击从新登录,这次输入正确的用户名密码
首先确定是否有cookie信息

点击登录

登录后发现cookie是已经记录在浏览器端了,后续打开网页会自动填充到文本框,因为在commons.js中设置了保存
登录成功页面

登录后重新回到登录页面查看cookie,并发现文本框自动填充

实现自动登录

只需要在index.html中的from标签中添加一个id,commons.js中添加一个方法即可

        //实现自动登录只需要在<form action="login" method="post" id="loginForm">标签中添加id,然后在下面执行submit方法
        document.getElementById("loginForm").submit();