关于web缓存，HTTP缓存和浏览器缓存的区别

描述：

最近在看浏览器缓存，突然又冒出web缓存和HTTP缓存，今天特意梳理一下这三者的区别；特记录于此，本人技术有限，只能解释一二，若有什么欠缺，也望不吝指出。

前端缓存概述：

前端缓存主要是分为HTTP缓存和浏览器缓存。其中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也会被清除。只在当前会话窗口有效，且作用域限制在同源同窗口