前端的储存方式
存储类：
Web存储 （Web Storage）：HTML 5 中提出的存储方式，容量有 5 M。
localStorage sessionStorage
Cookie：浏览器普遍支持的基于 HTTP 协议的存储方式，但容量只有 4 KB
数据库存储： IndexDB Web SQL
缓存类：
Cache Storage: 在 Service Worker 的规范中提出，一般配合 Service Worker 进行离线缓存。Application Cache： 在 HTML5.1提出的缓存方式，可用来构建离线应用。
\
Cookie 的优缺点：
优点：
可以控制过期时间，不会永久有效，有一定的安全保障。可进行扩展，可跨域共享。通过加密与安全传输技术 （SSL） ，可以减少 Cookie 被破解的可能性。有较高的兼容性。
缺点：
有一定的数量与长度限制，每个 Cookie 长度不能超过 4 KB ，否则超出部分会被截掉。请求头上的数据容易被拦截攻击。
Web Storage（localStorage和sessionStorage）
出现原因：
克服 Cookie 的一些限制，同时存储一些需要严格控制在客户端，不需要发送给服务器的一些数据。提供了除 Cookie 之外的另一种存储会话的途径。提供了一种大容量存储空间来跨回话存储数据的途径。
它们都是直接作为 window对象的属性存在的，我们可以直接通过 window.localStorage 与 window.sessionStorage 来访问。
注： Web Storage 只能储存字符串，如果用 Web Storage 存储对象，会出现 [Object Object], 可以用 JSON.stringify 与 JSON.parse方法来解决这个问题。
sessionStorage:
同源策略： 不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页： 两个相同域下的标签页不能互通。在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionStorage, 刷新标签页依然可以访问 sessionStorage。
使用场景：
主要针对会话级的小数据的存储。存储一些在当前页面刷新仍然需要存储，但是关闭后不需要留下的信息。很适合单页应用的使用，可以用来存储登录态信息等。
localStorage：
同源策略：和 sessionStorage 一样，要访问同一个 localStorage 页面必须来自同一个域名，同种协议，同种端口。localStorage 设定后，刷新或者重新打开标签页，关闭浏览器重新打开原来的标签页也可以访问到。
使用的场景：
持久性的保存客户端数据，只能通过 JavaScript 删除或者用户清除浏览器缓存。如果有一些稍大量的数据，例如编辑器的自动保存等。多页面间访问共同数据。 sessionStorage 只能用于一个标签页，而localStorage可以在多个标签页之间共享。
sessionStorage 与 localStorage 的区别 :
生命周期：localStorage 是本地存储，没有期限，只能用户自己操作来删除。 sessionStroage 是会话存储，页面关闭数据就会丢失。sessionStorage 有单标签页的限制，localStorage则没有。
IndexDB 与 Web SQL
特点：
访问：indexDB 和 Web SQL 和 Web Storage 一样，均是只能在创建数据库的域名下才能访问。存储时间：存储时间为永久，除非用户清除数据，他可用作长期的存储。大小限制：二者其实没有强制限制。只是 indexDB 在数据超过 50 M 之后会从浏览器弹出一个框让你确认。性能： indexDB 查询速度会相对较慢，而 Web SQL 的性能相对较快。IndexDB 特点：它的数据保存在对象存储空间中。创建对象存储空间，首先先定义一个键，之后添加数据。可以使用游标查询。
Cache Storage和Application Cache
Cache Storage：
Cache Storage 是用来存储 Response 对象 ，也就是对 HTTP 响应进行缓存。 Cache Storage 是多个 cache 的集合，每个 cache 可以存储多个响应对象。它基于 Promise。
Application Cache：
它是 HTML5 中新引入的应用程序换粗技术，它的出现意味着 web 应用可以通过缓存，在没有网络的环境下运行，构建离线应用。
优点 :
离线浏览
提升页面的载入速度
降低服务器的压力
Expires和Cache-Control两者对比：其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires
\
两种协商缓存的对比
1.首先在精确度上，Etag要优于Last-Modified，Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。
2.性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
3.优先级上，服务器校验优先考虑Etag
\
本地缓存
本地存储主要有以下几种,localStorage、sessionStorage、cookie、websql、indexDB.
1.localStorage
在前端设置,可以减少数据请求，长期存储。
2.sessionStorage
在前端设置，只存在当前会话中即重新打开浏览器则数据消失
3.cookie
在后端设置,保存在客户端本地文件,通过set-cookie设置且Cookie的内容自动在请求的时候被传递到服务器。
\
indexdb基础
www.ruanyifeng.com/blog/2018/0…
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
\
4.indexDB
为浏览器提供本地数据库,提供查找接口,还能建立索引 。
indexDB详细解释：（来自阮一峰老师博客-浏览器数据库 IndexedDB 入门教程）
通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
IndexedDB 具有以下特点。
（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
\
\
\
浏览器缓存
概念
简单来说，浏览器缓存就是浏览器把HTTP获取到的资源存储在本地的行为。
优先级
- 先在内存中查找
- 如果内存中不存在就在去硬盘中查找
- 如果硬盘中也没有进行网络请求
- 通过请求到的资源会进行缓存，存放到内存和磁盘中。
分类
- 强缓存
- 协商缓存
过程
- 当客户端进行资源请求时，首先客户端会根据http请求头，判断该请求是否命中强缓存，如果命中则直接从本地获取缓存资源，不会发送请求到服务端。
- 当没有命中强缓存时，请求会走到服务端，服务端会根据http请求头来验证是否命中了协商缓存，如果命中了协商缓存，回返304，告诉客户端从缓存中获取资源。
- 当协商缓存未命中时，会直接将资源返给客户端。
f5刷新
- 如果是按f5刷新，会直接跳过强缓存，但是会检查协商缓存
- ctr + f5 刷新，会直接跳过强缓存 + 协商换粗，直接从服务端获取加载资源。
强缓存
- Expires（http1.0规范，值为一个绝对时间的GMT格式的时间字符串，表示资源的过期时间）
- Cache-Control（http1.0规范，判断资源的生命周期，单位秒），值有如下几个：
-
- max-age：资源的最大生命周期
- no-cache：需要进行协商缓存，发送请求到服务端确认是否是否使用缓存
- no-store：禁止使用缓存，每次都需要重新请求。
- public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器
- private：只能被终端用户的浏览器缓存，不允许CDN等中间代理服务器对其缓存
- Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高
协商缓存
- Last-Modified / If-Modified-Since
Last-Modified 值为资源最后更新时间 GMT 格式的时间，随服务端 response 返回， 当浏览器再次请求该资源时，request 请求头中会包含 If-Modified-Since，该值为缓存之前返回的 Last-Modified，服务器收到 If-Modified-Since 后，根据资源的最后修改时间判断是否命中协商缓存
- ETag / If-None-Match
ETag 表示资源内容的唯一标识 一串数字码，随服务器端 response 返回，服务器通过比较请求头部的 If-None-Match 与当前资源的 ETag 是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存
总结
- 强缓存优先级高于协商缓存
- 只要使用缓存，服务端不会返回资源
- 强缓存不会发送请求
- 协商缓存会发送请求到服务端。
