[HTTP] 高级基础知识整理

Posted 2021-01-10 no-harm

HTTP 高级基础知识

整理 HTTP 高级基础知识，包括 Cookie / Session / localStorage / sessionStorage / Cache-Control / Expires / Etag 等

Cookie

cookie ：wiki

Cookie（复数形态Cookies），又称为“小甜饼”。中文名称为“小型文本文件”，指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
-wiki

cookie ：博客

cookie 是什么及作用：相当于一个凭证，可以辨别用户身份/记录历史。

怎么得到：服务器传给客户端（Client Side）。

保存在哪里：保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。

存在时长：

按存在时间，可分为非持久Cookie和持久Cookie。

1.内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的(但是后台代码可以设置 Cookie 存留时间)。

2.硬盘Cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间，硬盘Cookie不会被删除，其存在时间是长期的。

Cookie 的特点：

服务器通过 Set-Cookie 响应头设置 Cookie

浏览器得到 Cookie 之后，每次请求都要带上 Cookie

服务器读取 Cookie 就知道登录用户的信息（email）

设置 Cookie：Set-Cookie

具体流程： 在浏览器客户端（Client Side）注册网站 A -> 提交注册表单 POST 到 A 服务器 -> A 服务器在数据库创建用户 -> 创建成功 -> 回到登录页面 -> 输入登录选项提交登录表单 POST 到 A 服务器 -> 服务器确认用户存在 -> Set-Cookie (设置 Cookie)连同其他内容响应给用户 -> 浏览器得到并保存 Cookie -> 用户带着 Cookie 使用 GET 方法跳转到首页 -> 服务器读取 Cookie，获取用户信息

Cookie 的问题：用户可以随意篡改。

所以为了解决这个问题，引入了 session ↓↓↓↓↓↓↓↓↓↓↓↓↓

---

Session

session ：wiki

在计算机科学领域来说，尤其是在网络领域，会话（session）是一种持久网络协议，在用户（或用户代理）端和服务器端之间创建关联，从而起到交换数据包的作用机制，session在网络协议（例如telnet或FTP）中是非常重要的部分。

可以把 sessionID 看成是一个唯一的凭证，因为他是一个随机数组成的，谁也不知道，自然也就不能篡改。

服务器将 SessionID（随机数）通过 Cookie 发给客户端

客户端访问服务器时，服务器读取 SessionID

服务器有一块内存（哈希表）保存了所有 session

通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email

这块内存（哈希表）就是服务器上的所有 session

注意 Session 和 Cookie 的关系/区别：

Session 是基于 Cookie 来实现的，因为服务器要将 sessionID 通过 Cookie 传给用户。

Cookie 保存在客户端，Session 保存在服务端的内存里。

---

localStorage

html5 提供的API ： localStorage

如果说 session 是服务器上的 hash，那 localStorage 就是浏览器上的 hash，是实现本地持久化存储的一种方式。

localStorage 只能存储字符串。

设置 localStorage 项：localStorage.setItem(‘myCat‘,‘Tom‘)

获取 localStorage 项：let cat = localStorage.getItem(‘myCat‘)

移除 localStorage 项：localStorage.removeItem(‘myCat‘)

移除 localStorage：localStorage.clear()

常用场景：可以记录用户的某一种状态，比如更新

<script>
    // 获取 localStorage
    let msg = localStorage.getItem(‘更新信息‘)

    // 如果更新后 用户第一次登录该网站，则显示更新信息
    if(!msg){
        localStorage.setItem(‘更新信息‘,true)
        alert(‘网站已更新，相关信息已在....‘)

        // 如果用户已在更新后登录过该网站，则不显示更新信息
    }else{

    }
<script>

localStorage 特点：

LocalStorage 跟 HTTP 无关

HTTP 不会带上 LocalStorage 的值

只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）

每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）

常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）

LocalStorage 永久有效，除非用户清理缓存

注意 localStorage 和 Cookie 的区别：

localStorage 跟 HTTP 无关，且 Cookie 传给服务器的时候不会带上 localStorage。

所能存储的容量不同，localStorage 可以存储 5MB 左右，Cookie 最多可以存储 4KB 左右。

localStorage 是永久有效的，除非用户清理缓存；Cookie 默认是在关闭浏览器后就消失，但是可通过后台代码可任意设置Cookie的过期时间。

---

SessionStorage

特点同 localStorage，唯一不同的是：

LocalStorage 永久有效，除非用户清理缓存； SessionStorage 关闭页面后即被清除。

---

Cache-Control

Cache-Control ：wiki

什么是缓存：

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)。对于网站来说，缓存是达到高性能的重要组成部分。缓存需要合理配置，因为并不是所有资源都是永久不变的：重要的是对一个资源的缓存应截止到其下一次发生改变（即不能缓存过期的资源）。

缓存的作用：

重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。

设置缓存：Cache-control

注意：一般不在首页设置缓存，因为一旦设置了缓存，就获取不到更新后的代码。

设置了长时间缓存后如何更新：

把设置了缓存的文件名更新一下，即改变文件的 url ，如 <link rel="stylesheet" href="./default.css"> 改为 <link rel="stylesheet" href="./default.css?v=2">，浏览器就会请求更新后的文件。

Expires

Expores:MDN

Expires 响应头包含日期/时间， 即在此时候之后，响应过期。
无效的日期，比如 0, 代表着过去的日期，即该资源已经过期。
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。

即：Expires 相当于低版本的 Cache-Control，Expires 是什么时候过期，Cache-control 是多长时间后过期。

应该优先使用 Cache-control，因为 Expires 是以本地时间为准，一旦用户的本地时间设置错误，则会引发请求失效。

---

Etag 与 MD5

Etag

ETag或实体标签（entity tag）是万维网协议HTTP的一部分。
ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。这就使得缓存变得更加高效，而且节省带宽。如果资源的内容没有发生改变，Web服务器就不需要发送一个完整的响应。ETag也可用于乐观并发控制[1]，作为一种防止资源同步更新而相互覆盖的方法。

MD5:信息摘要算法，用于确保信息传输完整一致。

具体流程：

服务器给文件设置了一个 MD5 值(理论上是唯一的)，并且通过设置响应头 response.Set-Header(‘Etag‘,MD5)响应给了浏览器；

在浏览器再次请求此服务器文件时，请求头会带上此 MD5 值；

如果此文件发生了变动，他的 MD5 值也会发生改变，就会和浏览器的请求头所携带的 MD5 值不符合，服务器就会响应变动后的文件，并附带一个新的 MD5 值；

如果此文件没有发生变动，即他的 MD5 值没有发生变化，就会和浏览器的请求头所携带的 MD5 值符合，服务器接受到请求后会响应但不会返回此文件（即响应体是空的），继续沿用旧文件。

注意： Etag 和 Cache-Control 的区别

Etag：在文件没有发生变化的情况下，浏览器依然会发出请求，服务器会响应，但不会下载此文件(响应体是空)。

Cache-Control：如果文件设置了缓存时间，且文件没有发生变化，则浏览器不会发起请求。