21.浏览器缓存机制

1. http缓存

它是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头中的Cache-Control（或 Expires）、 Last-Modified和 Etag等字段判断从服务器端请求文件还是从本地读取文件。
主要是针对重复的http请求，在有缓存的情况下判断过程主要分3步：

判断expires，如果未过期，直接读取http缓存文件，不发http请求，否则进入下一步。
判断是否含有etag，有则带上if-none-match发送请求，未修改返回304，修改返回200，否则进入下一步。
判断是否含有last-modified，有则带上if-modified-since发送请求，无效返回200，有效返回304，否则直接向服务器请求。

2. websql

将数据以数据库的形式存储在客户端，让浏览器实现小型数据库存储功能；能够存储结构复杂的数据；允许sql语句对数据进行增加、删除、修改、查询，便于检索。

3. IndexedDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。
IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用，但是还没有被任何浏览器所实现。异步 API 在 Web Workers 内部和外部都可以使用，另外浏览器可能对indexDB有50M大小的限制，一般用于保存大量用户数据并要求数据之间有搜索需要的场景。

4. localstorage

localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。localstorage大小有限制（浏览器最大长度 IE9以上 5M Firefox 8以上 5.24M Opera 2M Safari/WebKit 2.6M ），不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。

5. sessionstorage

essionStorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同。

6. Cookies

Cookie(或者Cookies)，指一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成，一般用于保存用户的认证信息。cookie最大长度和域名个数由不同浏览器决定（浏览器支持域名个数最大长度 IE7以上 50个 4095B Firefox 50个 4097B Opera 30个 4096B Safari/WebKit 无限制 4097B）不同域名之间的cookie信息是独立的，如果需要设置共享可以在服务器端设置cookie的path和domain来实现共享。浏览器端也可以通过document.cookie来获取cookie，并通过js浏览器端也可以方便地读取/设置cookie的值。

7. application cache

application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中，menifest文件用于控制其它文件更新。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。
优点：

离线浏览 – 用户可在离线时浏览您的完整网站。
速度 – 缓存资源为本地资源，因此加载速度较快。
服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。

8. cacheStorage

CacheStorage是在ServiceWorker的规范中定义的。CacheStorage 可以保存每个serverWorker申明的cache对象，cacheStorage有open、match、has、delete、keys五个核心方法，可以对cache对象的不同匹配进行不同的响应。

9. flash缓存

基于flash有读写浏览器端本地目录的功能，并向js提供可调用的api。页面可以通过js调用flash去读写特定的磁盘目录，达到本地数据缓存的目的。这种方式基本不用。