前端处理缓存是每个前端工程师进阶必备的技能之一，也是面试中经常会被提及的知识点，本文就用通俗易懂的方式去全面的介绍前端缓存的处理方式和产生的作用。

什么是前端缓存

前端缓存也是web缓存，主要包括两部分：浏览器缓存和http缓存

浏览器缓存(本地缓存)

主要包括WebStorage、Cookie、WebSql、IndexDB、应用缓存（Application Cache）、PWA。

1、WebStorage

兼容性：IE7+

安全性：Web Storage的存储对象是独立于域名的，也就是说不同站点下的Web应用有着自己独立的存储对象，互相间是无法访问的，在这一点上SessionStorage和LocalStorage是相同的。不同的子域和协议下存储的也是不同的

存储方式：sessionStorage和localStorage

localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；同一地址跨窗口访问，localStorage可以同步被更新。

sessionStorage：会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。

特点：

1. 拥有更大的存储容量，Cookie是4k，Web Storage为5M。
2. 操作数据相比Cookie更简单。
3. 不会随着每次请求发送到服务端。

API:

// 数据是键值对的方式存储，注意value是string的形式
// 本地存储 
sessionStorage.setItem('key', value)
localStorage.setItem('key', value)
// 读取
sessionStorage.getItem('key')
localStorage.getItem('key')
// 删除
sessionStorage.removeItem('key');
localStorage.removeItem('key');
// 删除所有
sessionStorage.clear();
localStorage.clear();

2、Cookie

我们一般在浏览器查看cookie，属性如下图所示，我们对每一个值的含义解释下基本就清楚cookie的特性了。

1、Cookie的特征：键值对的形式存在。大小存储4Kb。

2、Cookie的作用域：主要是Domain和Path属性设置，指定了cookie所属的域名和路径，让浏览器仅发送给特定的服务器和 URI，避免被其他网站盗用。浏览器在发送 Cookie 前会从 URI 中提取出 host 和 path 部分，对比 Cookie 的属性。如果不满足条件，就不会在请求头里发送 Cookie

3、Cookie的安全性：js脚本里可以用 document.cookie 来读写 Cookie 数据,这就带来了安全隐患，有可能会导致“跨站脚本”（XSS）攻击窃取数据。属性HttpOnly会告诉浏览器，此 Cookie 只能通过浏览器 HTTP 协议传输，禁止其他方式访问，浏览器的 JS 引擎就会禁用 document.cookie 等一切相关的 API，脚本攻击也就无从谈起了。另一个属性“SameSite”可以防范“跨站请求伪造”（XSRF）攻击，设置成SameSite=Strict可以严格限定 Cookie 不能随着跳转链接跨站发送，而“SameSite=Lax”则略宽松一点，允许 GET/HEAD 等安全方法，但禁止 POST 跨站发送。还有一个属性叫“Secure”，表示这个 Cookie 仅能用 HTTPS 协议加密传输，明文的 HTTP 协议会禁止发送。但 Cookie 本身不是加密的，浏览器里还是以明文的形式存在。

4、Cookie的有效期可以使用 Expires 和 Max-Age 两个属性来设置。Expires俗称过期时间，用的是绝对时间点，可以理解为“截止日期”（deadline）。“Max-Age”用的是相对时间，单位是秒，浏览器用收到报文的时间点再加上

// 操作cookie方法

前端http缓存

官方介绍:Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这 个文档。