• Cookie和Session

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>表白墙</title>
    8.     <style>
    9.         /* * 通配符选择器, 是选中页面所有元素 */
    10.         * {
    11.             /* 消除浏览器的默认样式. */
    12.             margin: 0;
    13.             padding: 0;
    14.             box-sizing: border-box;
    15.         }
    16.  
    17.         .container {
    18.             width: 600px;
    19.             margin: 20px auto;
    20.         }
    21.  
    22.         h1 {
    23.             text-align: center;
    24.         }
    25.  
    26.         p {
    27.             text-align: center;
    28.             color: #666;
    29.             margin: 20px 0;
    30.         }
    31.  
    32.         .row {
    33.             /* 开启弹性布局 */
    34.             display: flex;
    35.             height: 40px;
    36.             /* 水平方向居中 */
    37.             justify-content: center;
    38.             /* 垂直方向居中 */
    39.             align-items: center;
    40.         }
    41.  
    42.         .row span {
    43.             width: 80px;
    44.         }
    45.  
    46.         .row input {
    47.             width: 200px;
    48.             height: 30px;
    49.         }
    50.  
    51.         .row button {
    52.             width: 280px;
    53.             height: 30px;
    54.             color: white;
    55.             background-color: orange;
    56.             /* 去掉边框 */
    57.             border: none;
    58.             border-radius: 5px;
    59.         }
    60.  
    61.         /* 点击的时候有个反馈 */
    62.         .row button:active {
    63.             background-color: grey;
    64.         }
    65.     </style>
    66. </head>
    67. <body>
    68.     <div class="container">
    69.         <h1>表白墙</h1>
    70.         <p>输入内容后点击提交, 信息会显示到下方表格中</p>
    71.         <div class="row">
    72.             <span>谁: </span>
    73.             <input type="text">
    74.         </div>
    75.         <div class="row">
    76.             <span>对谁: </span>
    77.             <input type="text">
    78.         </div>
    79.         <div class="row">
    80.             <span>说: </span>
    81.             <input type="text">
    82.         </div>
    83.         <div class="row">
    84.             <button id="submit">提交</button>
    85.         </div>
    86.         <div class="row">
    87.             <button id="revert">撤销</button>
    88.         </div>
    89.         <!-- <div class="row">
    90.             xxx 对 xx 说 xxxx
    91.         </div> -->
    92.     </div>
    93.  
    94.     <script>
    95.         // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
    96.         // 点击的时候, 获取到三个输入框中的文本内容
    97.         // 创建一个新的 div.row 把内容构造到这个 div 中即可. 
    98.         let containerDiv = document.querySelector('.container');
    99.         let inputs = document.querySelectorAll('input');
    100.         let button = document.querySelector('#submit');
    101.         button.onclick = function() {
    102.             // 1. 获取到三个输入框的内容
    103.             let from = inputs[0].value;
    104.             let to = inputs[1].value;
    105.             let msg = inputs[2].value;
    106.             if (from == '' || to == '' || msg == '') {
    107.                 return;
    108.             }
    109.             // 2. 构造新 div
    110.             let rowDiv = document.createElement('div');
    111.             rowDiv.className = 'row message';
    112.             rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
    113.             containerDiv.appendChild(rowDiv);
    114.             // 3. 清空之前的输入框内容
    115.             for (let input of inputs) {
    116.                 input.value = '';
    117.             }
    118.         }
    119.         let revertButton = document.querySelector('#revert');
    120.         revertButton.onclick = function() {
    121.             // 删除最后一条消息. 
    122.             // 选中所有的 row, 找出最后一个 row, 然后进行删除
    123.             let rows = document.querySelectorAll('.message');
    124.             if (rows == null || rows.length == 0) {
    125.                 return;
    126.             }
    127.             containerDiv.removeChild(rows[rows.length - 1]);
    128.         }
    129.     </script>
    130. </body>
    131. </html>

    运行出来的页面为：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. 点击提交：浏览器把表白信息，发到服务器这里

    2. 页面加载，浏览器从服务器获取到表白信息

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

    经典面试题：

    Cookie和Session

    围绕Cookie的几个问题：

    1. Cookie是个啥？？
      浏览器提供的持久化存储数据的机制
    2. Cookie从哪里来？？

      Cookie从服务器返回给浏览器的

      服务器代码中，由程序员决定要把啥样的信息，保存到客户端这边

    3. Cookie到哪里去？？
      Cookie会在后续浏览器访问服务器的时候，带着请求的header中，发给服务器
    4. 为啥要这么折腾？？
      服务器不是只给一个客户端提供服务，同一时候要处理多个客户端，此时服务器就可以通过cookie的值，来识别当前客户端是谁？？当前客户端的服务提供到哪个环节了？？（客户端借助cookie自报家门）
    5. Cookie存在哪里？？

      存储在浏览器（客户端）所在主机的硬盘中

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

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

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

    区别：

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

  • 相关阅读:
    腾讯T3整理分享的LeetCode算法小抄完整文档
    Dev C++安装与运行
    Java进击框架：Spring-数据存取（七）
    深入分析MySQL索引与磁盘读取原理
    【youcans 的图像处理学习课】总目录
    Java多线程（4）：ThreadLocal
    教你构建一个优秀的SD Prompt
    一百七十二、Flume——Flume采集Kafka数据写入HDFS中（亲测有效、附截图）
    【C++类】深拷贝、内联函数、数据成员
    全部常用邮件端口25、109、110、143、465、995、993、994
  • 原文地址：https://blog.csdn.net/weixin_64308540/article/details/134000409