Cookie和Session的区别、工作流程是什么？全网最详细！

叁歲伎倆 2024-03-31 10:34 79阅读 0赞

**目录**

前言

一、Cookie

1.1、Cookie从哪里来？

1.2、Cookie到哪里去？

二、Session

2.1、什么是sessionId?

三、Cookie和Session的区别

1.作用的对象不同

2.安全性不同

3.存储的位置不同

4.存储容量不同

5.存储时间不同

6.存储的数据类型不同

7.使用习惯上

8.存储习惯上

四、Cookie和Session的具体工作流程

五、代码实现用户登录

5.1、核心方法

5.2、代码

--------------------

## 前言 ##

想要了解Cookie和Session的工作流程，首先需要来了解一下什么是Cookie，什么是Session？之后我将会用一个**用户登录**（附加：前端+后端 代码）的栗子，让你通透整个工作流程；

--------------------

## 一、Cookie ##

有时候需要让网页存储一些简单数据，但由于网页禁止js访问电脑硬盘（原因：安全性），所以就提供了特殊的api给网页用，Cookie就是最经典的一个方案，是浏览器在本地存储数据（存储到硬盘上）的一种机制；

![914b45ae690844a2a7719250ca80817d.png][]

> Cookie如何组织信息的？键值对的形式！（如下图）

![ee7b81abb9964a4ea65f0cba6240fcfe.png][]

> Cookie是用来存放什么数据的？

*  上次访问网页的时间；
 *  当前网页的访问次数
 *  当前访问网页网页的身份标识（最典型的应用场景）；

> 特点：

*  Cookie是按照域名维度来组织的，不同域名下有不同的Cookie；
 *  和query string一样，是程序员自定义的；
 *  每一个Cookie都是一个键值对；
 *  Cookie有个过期时间，到时自动清除；

**注意：Cookie不是缓存，是持久化数据的手段（保存在硬盘上），缓存的数据是用来提高访问速度的；**

### 1.1、Cookie从哪里来？ ###

Cookie存在于浏览器，来源于服务器；

解释：在网页中我们所观察的Cookie都是浏览器访问了某一个服务器后，服务器返回一个响应报文，在响应header中包含 一个/多个 Set-Cookie这样的资源（程序员自己在服务器代码中写的），浏览器接收响应后，就见Set-Cookie这样的数据保存到浏览器本地；

如下图Fiddler所捕捉到的Set-Cookie：

![8a0f7b83bd754f298d111fda717609a1.png][]

### 1.2、Cookie到哪里去？ ###

来自服务器，存储到浏览器，最后返回到服务器；

解释：当浏览器保存了cookie后，下次访问同一网站，就会把之前存在本地的Cookie作为身份标识在http请求的header给返回到服务器，服务器就知道，喔，又是你来了~就把上次加载好的数据作为响应返回给浏览器；

--------------------

## 二、Session ##

服务器每一时刻接收到的请求是很多的；服务器为了区分这些请求分别是哪一个用户的，就需要记录用户和该用户信息之间的对应关系，这时Session会话机制就起到关键的作用！

Session会话的本质就是一个哈希表，用来存放一些键值对；例如用户登录一个网站，Session的key就是用户名，value就是该用户的信息；

**注意：Servlet 的 Session 默认是保存在内存中的. 如果重启服务器则 Session 数据就会丢失.**

### 2.1、什么是sessionId? ###

sessionId是由服务器生成的一个“唯一性字符串”，也可以理解为一个身份表示，通过这个，服务器就可以识别对应的用户；从session机制的角度来看，这个唯一性字符串称为 “sessionId”，但在整个登录流程来看，也可以把这个唯一字符称为 “token” ；

> 如下图：

![b86280932fe7483a915bb22ec621ab22.png][]

--------------------

## 三、Cookie和Session的区别 ##

#### 1.作用的对象不同 ####

Cookie是客户端机制，Session是服务器机制。

#### 2.安全性不同 ####

cookie存储在客户端，所以可以分析存放在本地的cookie并进行cookie欺骗，安全性较低。  
session存储在服务器上，不存在敏感信息泄漏的风险，安全性较高。

#### 3.存储的位置不同 ####

cookie的数据信息存放在本地硬盘。  
session的数据信息存放在服务器的内存中（一旦重启，数据就会丢失）。

#### 4.存储容量不同 ####

cookie存储的容量较小，一般<=4KB。  
session存储容量大小没有限制(但是为了服务器性能考虑，一般不能存放太多数据)。

#### 5.存储时间不同 ####

cookie可以长期存储，只要不超过设置的过期时间，可以一直存储。

session在超过一定的时间(通常为30分钟)不使用会失效。

#### 6.存储的数据类型不同 ####

Cookie 只能保管ASCII字符串。

session中能够存储任何类型的数据，包括且不限于string，integer，list，map等

#### 7.使用习惯上 ####

Cookie和Session经常一起配合使用，但不是必须配合使用。

#### 8.存储习惯上 ####

Cookie 主要用来存储上一次访问浏览器时间、访问次数、用户身份标识。

Session 主要用来存储用户身份标识和对应的用户详细信息。

--------------------

## 四、Cookie和Session的具体工作流程 ##

> 如下图：

![38a7d59d3c05454ab6e65979df091cb8.png][]

--------------------

## 五、代码实现用户登录 ##

### 5.1、核心方法 ###

> 把握一点：HttpSession就类似于HashMap~

<table style="width:650px;"> 
 <thead> 
  <tr> 
   <th style="width:95px;">方法</th> 
   <th style="width:403px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:95px;">HttpSession getSession()</td> 
   <td style="width:403px;"> <p>当服务器获取会话：</p> <p>1.若该方法的参数为true，则判断当前会话是否存在，若不存在就创建一个新的键值对保存到哈希表中，并生成sessionId返回到浏览器，若存在则返回对应的HttpSession；</p> <p>2.若该方法的参数为false，则判断当前会话是否存在，若不存在就返回null，若存在就返回HttpSession；</p> </td> 
  </tr> 
  <tr> 
   <td style="width:95px;">Object getAttribute(String name)</td> 
   <td style="width:403px;"> <p>类似于HashMap的get()方法：</p> <p>返回session会话中 name（key） 所对应的value；</p> <p>若没有指定名称的对象，就返回null；</p> </td> 
  </tr> 
  <tr> 
   <td style="width:95px;">void setAttribute(String name, Object value)</td> 
   <td style="width:403px;"> <p>类似于HashMap的put方法：</p> <p>该方法使用指定的名称绑定一个对象到该 session 会话（绑定一对key，value）；</p> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

### 5.2、代码 ###

> 1. loginServlet实现登录界面的服务器，登录次数通过数据库持久化保存；（如下代码）

import com.mysql.jdbc.Connection;
    import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import javax.sql.DataSource;
    import java.io.IOException;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    @WebServlet("/login")
    public class LoginServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            resp.setContentType("text/html; charset=utf8");
            //从客户端请求中获取用户名和密码
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            //判定账户密码是否正确
            //这里假设已经注册的账户为:
            //username:zhangsan  password:123
            if (!"zhangsan".equals(username) || !"123".equals(password)) {
                resp.getWriter().write("很抱歉，登录失败，您的用户名或密码输入错误!");
                return;
            }
            //登录成功
            System.out.println("" + username + "成功登录");
            //从数据库中获取该用户的登录次数
            int loginCount = 0;
            try {
                loginCount = load(username);
            } catch (SQLException e) {
                e.printStackTrace();
            }
            //由于登录成功，所以登录次数加一，保存到数据库中
            try {
                save(username, String.valueOf(++loginCount));
            } catch (SQLException e) {
                e.printStackTrace();
            }
            //设置Session
            //getSession的参数true表示若查找不到HttpSession,就会新建立一个，并生成
            //一个sessionId插入哈希表,通过Set-Cookie返回给浏览器
            HttpSession session = req.getSession(true);
            //HttpSession对象自身相当于一个哈希表，可以根据需求设置里面的参数
            session.setAttribute("username", "zhangsan");
            session.setAttribute("loginCount", loginCount);
            //设置重定向到主界面index
            resp.sendRedirect("index");
        }
    
        //修改数据库中的数据(登录次数)
        private void save(String username, String loginCount) throws SQLException {
            //创建数据源
            DataSource dataSource = SingletonLazy.getDataSource();
            //建立连接
            Connection connection = (Connection) dataSource.getConnection();
            //构造sql
            String sql = "update message set loginCount = ? where name = ?";
            PreparedStatement statement = connection.prepareStatement(sql);
            statement.setString(1, loginCount);
            statement.setString(2, username);
            //执行sql
            int ret = statement.executeUpdate();
            //打印日志
            System.out.println("ret = " + ret);
            //关闭数据库
            statement.close();
            connection.close();
        }
    
        //从数据库中获取登录次数
        private int load(String username) throws SQLException {
            //创建数据源
            DataSource dataSource = SingletonLazy.getDataSource();
            //建立连接
            Connection connection = (Connection) dataSource.getConnection();
            //构造sql
            String sql = "select loginCount from message where name = ?";
            PreparedStatement statement = connection.prepareStatement(sql);
            statement.setString(1, username);
            //执行sql
            ResultSet resultSet = statement.executeQuery();
            int loginCount = 0;
            while(resultSet.next()) {//这里只对应一个结果
                loginCount = resultSet.getInt("loginCount");
            }
            //关闭数据库
            statement.close();
            connection.close();
            return loginCount;
        }
    }

> 2.通过单例模式（懒汉）创建数据库的数据源（如下图）

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
    
    import javax.sql.DataSource;
    
    public class SingletonLazy {
        private volatile static DataSource dataSource = null;
        public static DataSource getDataSource() {
            if(dataSource == null) {
                synchronized(SingletonLazy.class) {
                    if(dataSource == null) {
                        dataSource = new MysqlDataSource();
                        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/login?characterEncoding=utf8&useSSL=false");
                        ((MysqlDataSource)dataSource).setUser("root");
                        ((MysqlDataSource)dataSource).setPassword("1111");
                    }
                }
            }
            return dataSource;
        }
    }

> 3. indexServlet实现登录后主页面的反馈；（如下图）

import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    @WebServlet("/index")
    public class indexServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            resp.setContentType("text/html; charset=utf8");
            //判断当前用户是否已经登录
            //getSession参数为false，表示若没有创建过HttpSession，则返回null;
            //若创建过，则返回该对象
            HttpSession session = req.getSession(false);
            if(session == null) {
                resp.getWriter().write("很抱歉，尚未登录");
                //重定向到index
                resp.sendRedirect("login");
                return;
            }
            //已登录过，就从Session中访问数据
            //这里由于getAttribute返回的是Object类型，所以这里需要强转成String
            String username = (String)session.getAttribute("username");
            int loginCount = (int)session.getAttribute("loginCount");
            resp.getWriter().write("欢迎回来:" + username + "~" + "<br>"
                    + "您今日已经登录了:" + loginCount + "次");
        }
    }

> 4. login.html 一个简易登录界面，用来发送post请求登录

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录界面</title>
    </head>
    <body>
        <style>
            .container {
                width: 400px;
                margin: 0 auto;
            }
            h1 {
                padding: 10px;
                width: 200px;
                margin: 0 auto;
                text-align: center;
            }
            p {
                margin: 10px auto;
                color: gray;
                text-align: center;
            }
            .row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 2px 0;
                width: 300px;
            }
            div input {
                height: 30px;
                width: 200px;
            }
            form {
                width: 300px;
                margin: 0 auto;
            }
            .button {
                margin: 0 auto;
                height: 40px;
                width: 300px;
                background-color: orange;
                border: none;
                color: white;
            }
            .button:active {
                background-color: rgb(251, 209, 130);
            }
        </style>
        <div class="container">
            <h1>登录界面</h1>
            <p>输入后点击登录，若信息正确自动跳转</p>
            <form class action="login" method="post">
                <div class="row">
                    <span>账户</span>
                    <input type="text" name="username">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" name="password">
                </div>
                <div class="row">
                    <input class="button" type="submit" value="登录">
                </div>
            </form>
        </div>
    </body>
    </html>

--------------------

![ecb8c755627a4092a8f46ccf08318d41.gif][]

[914b45ae690844a2a7719250ca80817d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8068ad74c2db4a9588bc0d9e73380091.png
[ee7b81abb9964a4ea65f0cba6240fcfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d117a729f1bc4681bdbdf2502b63f384.png
[8a0f7b83bd754f298d111fda717609a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a7988ef0801f4b3cb77a36d39a0989ed.png
[b86280932fe7483a915bb22ec621ab22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b7010e5f030d445e9ea4dd07a30e8edd.png
[38a7d59d3c05454ab6e65979df091cb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c816a180cf2f4ef8a586e55ce1e14e84.png
[ecb8c755627a4092a8f46ccf08318d41.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e374508f8cc44477ac2c83978c70769e.gif