说说浏览器缓存和HTTP缓存

[lhlGitHub]

No description provided.

[Moannas]

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

整体流程

HTTP缓存都是从第二次请求开始的

第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数;第二次请求时，浏览器判断这些请求参数，击中强缓存就直接使用缓存内容，否则就把请求参数加到request header头中传给服务器，看是否击中协商缓存，击中则使用该缓存资源，否则服务器会返回新的资源。

HTTP缓存分为强缓存和协议缓存:

强缓存命中的话不会发请求到服务器，协商缓存一定会发送请求到服务器。

浏览器缓存

Cookie主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。但是每次浏览器对cookie的数量大小都有限制，如果cookie的数量过多，会导致http里的header的内容过大，导致出现错误。

web存储分为localStorage和sessionStorage，web存储的数据不会向服务器发送，相比更加安全。只是用于用户请求网站数据，可以存储大量数据。且不影响性能。同样遵循“同源策略”

LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。作用域在文档源

            存储值：localStorage.属性名=值；   属性名 自己来定。值可以是任意类型

            读取：localSrorage.属性名； 

            修改：只要遵循同源策略，任何页面都可以修改值

            方法：setItem("属性名"，值)；存储一个值

                      getItem("属性名")：读取值

                      removeItem("属性名")；删除值

                      clear():全部删除

SessionStorage的属性方法同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。只在当前会话窗口有效，且作用域限制在同源同窗口

[loringray]

浏览器缓存其实就是浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。
缓存资源地址：
1、memory cache （内存）
2、disk cache （磁盘）

浏览器的本地存储主要分为 Cookie、WebStorage 和 IndexedDB,
其中 WebStorage 又可以分为l ocalStorage 和 sessionStorage

HTTP 缓存主要分为强缓存和协商缓存。
强缓存：我们第一次进入页面，请求服务器，然后服务器进行应答，浏览器会根据response Header来判断是否对资源进行缓存，如果响应头中 expires、pragma 或者 cache-control 字段，代表这是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中。

协商缓存：协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存的过程。主要有：Last-Modified / If-Modified-Since
协商缓存生效，返回304；Etag / If-None-Match等等...