Cookie和Session - 技术栈

前言扩展：笔者在之前学习前端扫盲阶段，写过一个简单易读的：表白墙项目，具体的前端代码如下：

<!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>
    <style>
        /* * 通配符选择器, 是选中页面所有元素 */
        * {
            /* 消除浏览器的默认样式. */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }

        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }

        .row span {
            width: 80px;
        }

        .row input {
            width: 200px;
            height: 30px;
        }

        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            border-radius: 5px;
        }

        /* 点击的时候有个反馈 */
        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交, 信息会显示到下方表格中</p>
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <div class="row">
            <button id="revert">撤销</button>
        </div>
        <!-- <div class="row">
            xxx 对 xx 说 xxxx
        </div> -->
    </div>

    <script>
        // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
        // 点击的时候, 获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可. 
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function() {
            // 1. 获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if (from == '' || to == '' || msg == '') {
                return;
            }
            // 2. 构造新 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            containerDiv.appendChild(rowDiv);
            // 3. 清空之前的输入框内容
            for (let input of inputs) {
                input.value = '';
            }
        }
        let revertButton = document.querySelector('#revert');
        revertButton.onclick = function() {
            // 删除最后一条消息. 
            // 选中所有的 row, 找出最后一个 row, 然后进行删除
            let rows = document.querySelectorAll('.message');
            if (rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }
    </script>
</body>
</html>

运行出来的页面为：

当然，在这个前端运行出来的表白墙项目上有不小的问题！

如果刷新页面/关闭页面重新打开，之前输入的消息就不见了！
如果一个机器上输了数据，第二个机器是看不到的（这些数据都是在本地浏览器中，并没有存储到相应的数据库/云服务器中！

那么，我们有着一下思路：

让服务器来存储用户提交的数据，由服务器保存

当有新的浏览器打开页面的时候，从服务器获取数据

此处，服务器就可以用来进行"存档"，"读档"

根据上述思路，来设计程序：

写Web程序，务必要考虑前后端如何交互？？约定好前后端交互的数据格式（设计前后端交互接口）

请求是啥样的？？
响应是啥样的？？
浏览器啥时候发这个请求？？
浏览器按照啥样的格式来解析？？
.....................
.....................

那么，我们就得有着以下约定：

约定：前后端交互数据的格式：

此处的约定方式有很多种，具体的设定都不尽相同

但是，此处的约定没有固定的强制要求

只要保证能够实现必要的代码即可

此处的目的就是为了前端代码和后端代码能够对上号即可！

哪个环节涉及到前后端交互？？

点击提交：浏览器把表白信息，发到服务器这里
页面加载，浏览器从服务器获取到表白信息

当然，思路仅仅是这么多，至于其他的代码，就不在此涉及！！

经典面试题：

Cookie和Session

围绕Cookie的几个问题：

Cookie是个啥？？浏览器提供的持久化存储数据的机制
Cookie从哪里来？？ Cookie从服务器返回给浏览器的

服务器代码中，由程序员决定要把啥样的信息，保存到客户端这边
Cookie到哪里去？？ Cookie会在后续浏览器访问服务器的时候，带着请求的header中，发给服务器
为啥要这么折腾？？服务器不是只给一个客户端提供服务，同一时候要处理多个客户端，此时服务器就可以通过cookie的值，来识别当前客户端是谁？？当前客户端的服务提供到哪个环节了？？（客户端借助cookie自报家门）
Cookie存在哪里？？存储在浏览器（客户端）所在主机的硬盘中

浏览器会根据域名来分别存储

Cookie有个最典型的应用（Cookie的用途有很多）：标识用户的身份信息：

注意理解Cookie和Session之间的关联和区别：

区别：

Cookie是客户端的存储机制，Session是服务器的存储机制
Cookie里面可以存各种键值对（还可以有别的）
Session则专门用来保护用户的身份信息
Cookie是属于HTTP协议中的一部分
Session则可以和HTTP无关（TCP，websocket...也可以用session）