indexedDB 前端缓存实战

1.## indexedDB 前端缓存实战

• 业务场景：最近项目组接触一个H5的项目，里面有一个课程学习的功能，里面基本都是一些比较大的gif 图片或者是一些高清的 jpg /png 图片，这个时候如果每次通过用户学习的过程中点击下一步再去下载对应的图片，如果刚好下载的图片比较大就会导致用户交互体验极差的问题，所以当时就想在学习课程之前让用户提前下载资源并缓存在前端，这时需要在前端做一个缓存，前端缓存使用比较多的是localStorage/sessionStorage ,但是应该很明显不符合我们的业务场景（因为localStorage/sessionStorage 允许存储的空间最多5M左右）。
  所以此时的我们想到了浏览器的IndexDB，和web SQL 但是web SQL 后面被废弃了不再维护，所以我们选择了IndexDB,下面来简单介绍一下它
• IndexDB 简介
  IndexedDB和传统的关系型数据不同的是，它是一个key-value型的数据库。

value可以是复杂的结构体对象，key可以是对象的某些属性值也可以是其他的对象（包括二进制对象）。你可以使用对象中的任何属性做为index，以加快查找。

IndexedDB是自带transaction(事务)的，所有的数据库操作都会绑定到特定的事务上，并且这些事务是自动提交了，IndexedDB并不支持手动提交事务。

IndexedDB API大部分都是异步的，在使用异步方法的时候，API不会立马返回要查询的数据，而是返回一个callback。

异步API的本质是向数据库发送一个操作请求，当操作完成的时候，会收到一个DOM e