一、http缓存

http缓存是存在于服务器与浏览器之间，是一种保存资源副本并在下次请求时直接使用该副本的技术。web缓存发现请求资源已经被存储，它会拦截请求，返回资源副本，而不会去服务器重新请求资源。

二、WebSQL

websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有以下特点：

Web Sql 数据库API 实际上不是html5规范的组成部分;
在html5之前就已经存在了，是单独的规范;
它是将数据以数据库的形式存储在客户端，根据需求去读取;
跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的;
Web Sql 更方便于检索，允许sql语句查询;
让浏览器实现小型数据库存储功能;
这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持;

websql API主要包含三个核心方法：

openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction : 这个方法允许我们根据情况控制事务提交或回滚。
executeSql : 这个方法用于执行真实的SQL查询。

三、indexDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储，对于存储少量数据是非常有用的，但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。

IndexedDB 的特点有:

indexDB大小取决于你的硬盘，存储的数据量非常大。
可以直接存储任何类型的数据，如 js任何类型的数据、blob流。
可以创建索引，提供高性能搜索功能。
采用事务，保证数据的准确性和一致性。

四、cookie

cookie指的就是会话跟踪技术。一般指网站为了辨别用户身份，进行session跟踪而而存储在用户本地终端上的数据，cookie一般通过http请求头发送到服务器。cookie主要特点有：

跨域限制，同一个域名下可多个网页内使用。
cookie可以设置有效期，超出有效期自动清除。
cookie存储大小在4K以内。
cookie的存储不能超过50个cookie。
只能存储字符串类型。

五、localstorage

localStorage是HTML5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。

localStorage核心API:

localStorage.setItem(key, value)   //设置记录

localStorage.getItem(key)          //获取记录

localStorage.removeItem(key)        //删除该域名下单条记录

localStorage.clear()               //删除该域名下所有记录
复制代码

值得注意的是，localstorage大小有限制，不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。

六、sessionstorage

sessionStorage与上述localStroage类似，它的特点主要有：

存储的数据在浏览器关闭后删除，与网页窗口具有相同的生命周期。
可以存储的数据大小5M。
存储的数据不会发送到服务器。

七、application cache

application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。

离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。

使用缓存接口可为您的应用带来以下三个优势：

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

八、cacheStorage

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

cacheStorage.has()：如果包含cache对象，则返回一个promise对象。

cacheStorage.open()：打开一个cache对象，则返回一个promise对象。

cacheStorage.delete()：删除cache对象，成功则返回一个promise对象，否则返回false。

cacheStorage.keys()：含有keys中字符串的任意一个，则返回一个promise对象。

cacheStorage.delete()：匹配key中含有该字符串的cache对象，返回一个promise对象。

九、flash缓存

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

浏览器缓存