HTTP存储以及浏览器存储

一、什么是缓存？

       缓存是一种临时存储数据的技术，旨在提高对这些数据的访问速度和效率。缓存系统通过将常用的数据保存在一个临时性、快速访问的存储介质中，以减少从较慢的主存储器或持久性存储中检索数据的次数。

简而言之，缓存就是一个临时存储器。

二、缓存的作用

       缓存主要是为了提高数据的读取速度。因为服务器和应用客户端之间存在着流量的瓶颈，所以读取大容量数据时，使用缓存来直接为客户端服务，可以减少客户端与服务器端的数据交互，从而大大提高程序的性能。

       常见的应用包括Web浏览器缓存网页、操作系统缓存文件和应用程序数据等。通过减少对慢速存储介质的访问，缓存技术有助于提高计算机系统的整体性能。

三、前端缓存的分类

       前端缓存主要分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进行设置。

1.HTTP缓存

HTTP缓存又分为强缓存和协商缓存。

1.1强缓存

       强缓存策略可以通过两种方式来设置，分别是用 Expires、Cache-Control 两个头字段，其中Cache-Control 的优先级高于 Expires 。使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求，直接从缓存中读取内容，并返回HTTP状态码200。

（1）Expires

Expires 首部字段是HTTP/1.0中定义缓存的字段，其给出了缓存过期的绝对时间，是一个GMT的格式的标准时间。

       当客户端请求服务器的时候，服务器会返回资源的同时还会带上响应头 Expires ，表示资源的过期具体时间，如果客户端在过期时间内再次获取该资源，就不需要再请求服务器了，可以直接在缓存中拿。但是存在一个问题，就是客户端的时间和服务器端的时间不一样，或者用户可以对客户端事假进行修改的情况，就可能会影响缓存命中的结果。

优点	缺点
在过期时间内，为用户省了很多流量。	缓存过期以后，服务器不管文件有没有变化都会再次请求服务器。
减少了服务器重复读取磁盘文件的压力。	缓存过期时间是一个具体的时间，这个时间依赖于客户端的时间，如果时间不准确或者被改动，缓存也会随之收到影响。

（2）Cache-Control

       Cache-Control 首部字段是 HTTP/1.1 中定义缓存的字段，其用于控制缓存的行为，可以组合使用多种指令，多个指令之间可以通过 “,” 分隔。常用的指令有：max-age、s-maxage、public/private、no-cache/no store 等。

Cache-Control既能出现在请求头，又能出现在响应头。以下是Cache-Control可设置的字段：

max-age：设置缓存的最大有效期，单位为秒。

s-maxage：优先级高于max-age，仅适用于共享缓存（CDN），优先级高于max-age获取Expires头。

public：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用max-age=来精确控制。

private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存。

no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源。

no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源。

1.2协商缓存

       协商缓存可以看做强制缓存失效后，浏览器携带缓存标识向服务器发起请求，如果资源没有发生修改，则返回一个304状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源。

协商缓存主要有四个头字段，它们两两配合使用。Last-Modified 和 If-Modified-Since 一组，Etag 和 If-None-Match 一组，Etag的优先级高于Last-Modified，所以当同时存在的时候会以 Etag 和 If-None-Match 为主。

Last-Modified：响应头，资源最近修改时间，由服务器告诉浏览器。

If-Modified-Since：请求头，资源最近修改时间，由浏览器告诉服务器。

Etag：响应头，资源标识，由服务器告诉浏览器。

If-None-Match：请求头，缓存资源标识，由浏览器告诉服务器。其实就是第一次访问服务器返回的Etag的值。

       服务器通过在响应头中添加Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。如果资源已经被修改了，则返回修改后的资源。这种方法有一个缺点就是，Last-Modified 标注的最后修改时间只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。

       服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。在下一次资源请求时，浏览器会在请求头中添加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较，以此来判断资源是否发生改变，是否需要返回资源。

2.浏览器缓存

此处只介绍几种常用的浏览器缓存。

（1）Cookie

       Cookie主要用于用户信息的存储，是服务器发送到用户浏览器的一小块数据，客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。当浏览器下次向同一服务器再发起请求时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

（2）localStorage

        将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

（3）sessionStorage

       将数据保存在 session 对象中。所谓 session（会话），是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

更多更详细的关于cookie、session、localStorage、sessionStorage等的相关知识以及它们的区别，可以参考该文章https://blog.csdn.net/weixin_45950819/article/details/123105435?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170738784716800227491529%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170738784716800227491529&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-123105435-null-null.142^v99^pc_search_result_base3&utm_term=cookie%E4%B8%8Esession%20localstorage&spm=1018.2226.3001.4187

最后挂条链接，该链接的文章，个人觉得讲的也十分详细，还很有趣。https://blog.csdn.net/hyupeng1006/article/details/126599764