标签：用户 传输 删除 cache 验证 优先 header dev remove
整理 HTTP 高级基础知识，包括 Cookie / Session / localStorage / sessionStorage / Cache-Control / Expires / Etag 等
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 ：wiki
在计算机科学领域来说，尤其是在网络领域，会话（session）是一种持久网络协议，在用户（或用户代理）端和服务器端之间创建关联，从而起到交换数据包的作用机制，session在网络协议（例如telnet或FTP）中是非常重要的部分。
可以把 sessionID 看成是一个唯一的凭证，因为他是一个随机数组成的，谁也不知道，自然也就不能篡改。
服务器将 SessionID（随机数）通过 Cookie 发给客户端
客户端访问服务器时，服务器读取 SessionID
服务器有一块内存（哈希表）保存了所有 session
通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
这块内存（哈希表）就是服务器上的所有 session
注意 Session 和 Cookie 的关系/区别：
Session 是基于 Cookie 来实现的，因为服务器要将 sessionID 通过 Cookie 传给用户。
Cookie 保存在客户端，Session 保存在服务端的内存里。
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的过期时间。
特点同 localStorage，唯一不同的是：
LocalStorage 永久有效，除非用户清理缓存； SessionStorage 关闭页面后即被清除。
Cache-Control ：wiki
什么是缓存：
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)。对于网站来说，缓存是达到高性能的重要组成部分。缓存需要合理配置，因为并不是所有资源都是永久不变的：重要的是对一个资源的缓存应截止到其下一次发生改变（即不能缓存过期的资源）。
缓存的作用：
重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。
设置缓存：Cache-control
注意：一般不在首页设置缓存，因为一旦设置了缓存，就获取不到更新后的代码。
设置了长时间缓存后如何更新：
把设置了缓存的文件名更新一下，即改变文件的 url ，如 <link rel="stylesheet" href="./default.css"> 改为 <link rel="stylesheet" href="./default.css?v=2">，浏览器就会请求更新后的文件。
Expores:MDN
Expires 响应头包含日期/时间， 即在此时候之后，响应过期。
无效的日期，比如 0, 代表着过去的日期，即该资源已经过期。
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。
即：Expires 相当于低版本的 Cache-Control，Expires 是什么时候过期，Cache-control 是多长时间后过期。
应该优先使用 Cache-control，因为 Expires 是以本地时间为准，一旦用户的本地时间设置错误，则会引发请求失效。
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：如果文件设置了缓存时间，且文件没有发生变化，则浏览器不会发起请求。
标签：用户 传输 删除 cache 验证 优先 header dev remove
原文地址：https://www.cnblogs.com/No-harm/p/9736958.html
