Cookie维持服务器状态的小饼干

Cookie是什么

• HTTP 是无状态的协议（对于事务处理没有记忆能力，每次客户端和服务端会话完成时，服务端不会保存任何会话信息）：每个请求都是完全独立的，服务端无法确认当前访问者的身份信息，无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。所以服务器与浏览器为了进行会话跟踪（知道是谁在访问我），就必须主动的去维护一个状态，这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态需要通过 cookie 或者 session 去实现。

• cookie 存储在客户端： cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

• cookie 是不可跨域的： 每个 cookie 都会绑定单一的域名，无法在别的域名下获取使用，一级域名和二级域名之间是允许共享使用的（靠的是 domain） 。

Cookie原理

Cookie原理以及生成机制，无非是三步，首先浏览器会以一种无状态的模式去向服务器发起HTTP请求，服务器接收到请求之后会在请求上的respond header上加上Cookie相关的信息，然后返回浏览器；浏览器后面再向服务器发起请求的时候都会同步带上Cookie,那这样Cookie就会附带在每个HTTP请求上。服务器

Cookie如何生成

• 方法一： 服务端生成，在 Http Response Header 中 Set-Cookie。

代码实现

    <script>
      // 获取登录表单元素
      const loginForm = document.getElementById("loginForm");
      // 为登录表单添加提交事件监听器
      loginForm.addEventListener("submit", async (event) => {
        // 阻止表单默认提交行为
        event.preventDefault();
        // 获取用户名和密码输入框的值，并去除首尾空格
        const username = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        // console.log(username, password)
        try {
          // 使用fetch API发送POST请求到 /login 端点
          const response = await fetch("/login", {
            method: "POST",
            // 设置请求头，表明请求体为JSON格式
            headers: {
              "Content-Type": "application/json",
            },
            // 将用户名和密码转换为JSON字符串作为请求体
            body: JSON.stringify({
              username,
              password,
            }),
          });
          // 解析响应数据为JSON格式
          const data = await response.json();
          // console.log(data);
        } catch (err) {
          // 捕获请求过程中的错误，并在控制台输出提示信息
          console.log("登录出错了");
        }
      });

      // 监听DOM加载完成事件
      document.addEventListener("DOMContentLoaded", async () => {
        // 登录吗？
        try {
          // 使用fetch API发送GET请求到 /check-login 端点，检查登录状态
          const response = await fetch("/check-login");
          // 解析响应数据为JSON格式
          const data = await response.json();
          // console.log(data, '////||');
          // 根据返回的登录状态更新页面显示
          if (data.loggedIn) {
            // 如果已登录，隐藏登录表单，显示欢迎信息
            document.getElementById("loginSection").style.display = "none";
            document.getElementById("welcomeSection").style.display = "block";
            document.getElementById("userDisplay").textContent = data.username;
          } else {
            // 如果未登录，显示登录表单，隐藏欢迎信息
            document.getElementById("loginSection").style.display = "block";
            document.getElementById("welcomeSection").style.display = "none";
          }
        } catch (err) {}
      });
    </script>

登录功能 ：监听登录表单的提交事件，阻止默认提交行为，收集用户名和密码，使用 fetch API 发送 POST 请求到 /login 端点进行登录验证。

登录状态检查 ：在 DOM 加载完成后，使用 fetch API 发送 GET 请求到 /check-login 端点，根据返回的登录状态更新页面显示。

错误处理 ：在请求过程中捕获可能出现的错误，并在控制台输出登录错误提示信息。

    if(req.method == 'POST'&& req.url == '/login'){
      // 用户名和密码的校验
      res.writeHead(200,{
        // 服务器端设置的
        'Set-Cookie': "user=admin;",
        'Content-Type': "application/json"
      })
    res.end(
      JSON.stringify({
        success: true,
        msg: '登录成功'
      })
    )
  }

  if(req.method == 'GET' && req.url == '/check-login'){
    if(req.headers.cookie){
      res.end(JSON.stringify({
        loggedIn: true,
        username: "admin"
      }))
    }else{
      res.end(JSON.stringify({
        loggedIn: false,
        username: ""
      }))
    }
  }

让我们来看看服务器端有没有拿到用户输入注册生成的Cookie吧！！！

• 方法二： 客户端生成，通过 documnet.cookie设置。

在终端设置了两个cookie,现在可以通过在应用层去查找cookie储存在浏览器当中的位置。

Cookie的误用

Cookie设计初衷用于维持HTTP状态，不用于存储数据。让无状态的请求变成有装填，但是它不是用于存储数据的。很多同学可能会把cookie作为一个存储数据的场景来使用。原因如下：

大小限制：Cookie有大小的限制，每个cookie项只能存储4k数据。

性能浪费：cookie附带在 http 请求上，数据量过大，会导致每个http请求就非常庞大。