1.关于indexedDB
indexedDB用于在浏览器端存储大量的结构化数据。对比于其他的浏览器存储技术（cookie，localStorage），indexedDB具有以下优点：
1.存储空间特别大，远超cookie与localStorage；
2.可以通过索引实现高性能搜索；
3.所有操作完全异步执行；另外，indexedDB还具备以下特点：
1.非关系型数据库，不能使用结构化查询语言（SQL）；
2.数据以健值对的方式存储；
3.事务模式数据库，任何操作都发生在事务中；
4.遵循同源策略；基于以上的特点，indexedDB非常适合于需要在客户端存储大量数据的网站，更是和基于PWA的WebAPP相契合。
关于indexedDB的浏览器兼容性，可以参照：https://www.caniuse.com/#search=indexeddb
2.基本使用
1.创建/打开数据库
var request = window.indexedDB.open(DBName, version);
函数包含两个参数，第一个为数据库名称，第二个为数据库版本号（整数）。
使用open函数创建/打开数据库时，根据参数不同，可能存在以下几种情况：
1.指定名称的数据库不存在，则新建数据库，默认版本号为1；
2.指定名称的数据库已存在，省略版本号，则打开当前版本号的数据库；
3.指定名称的数据库已存在，版本号大于数据库实际版本号，则进行数据库升级；open函数返回一个IDBOpenDBRequest对象，该对象通过以下三种事件进行数据库打开操作的后续处理：
var db;
//打开数据库成功事件，返回数据库对象实例（IDBDatabase对象的实例）
request.onsuccess = function(event){
db = request.result;
}
//打开数据库失败事件
request.onerror = function(event){
//打印报错信息
}
//数据库升级事件，仅在创建数据库/数据库升级时触发
request.onupgradeneeded = function(event){
//缓存IDBDatabase接口，用于后续创建/删除对象存储空间（对象仓库，类比于关系型数据库的表）
var _db = event.target.result;
//创建/删除对象存储空间的操作
...
}无论是打开数据库，或者是更新数据库，所有后续的查询、插入、删除等操作，都要通过onsuccess函数返回的IDBDatabase实例去调用。
所有对数据库schema的更新只能在onupgradeneeded事件中进行。
2.创建对象仓库及索引
indexedDB中，使用对象仓库来存储具体的数据，其功能类似与关系型数据库的表。
不同于关系型数据库的表结构，对象仓库中数据的存储结构如下图所示：
Key代表对象仓库主键，而具体的数据，采用对象的方式存储在Value中。
在数据库新建操作完成后，接下来就是新建对象仓库，并创建索引了。
对象仓库的创建 与 该对象仓库中索引的创建方法为：
request.onupgradeneeded = function(event){
var _db = event.target.result;
var objectStore;
//首先，可以先判断是否存在重名的对象仓库
if(!_db.objectStoreNames.contains('person')){
//创建对象仓库，第一个参数为仓库名称，第二个参数可选
objectStore = _db.createObjectStore('person', {
//主键
keyPath: 'id',
//可选，主键自增
autoIncrement: true
});
//创建索引，第一个参数为索引名称，第二个参数为索引所在的属性，可以使用数组将多个属性设置为一个索引
//第三个参数为可选参数，指定该属性的值是否要求唯一
objectStore.createIndex('phone_index', 'phone', {unique: true});
}
}关于为什么要创建索引：对数据库不是很熟悉，或者对关系型数据库有所了解，而对非关系型数据库不太了解的同学，可能会对索引有所疑惑。索引的意义，在于快速查询数据，就如同书的目录一样，通过目录可以快速找到我们想看内容的页数。在关系型数据库中，查询数据，可以使用SQL语句：select * from person where phone="13910002000"，而在非关系型数据库中，没有SQL，如果没有索引，我们只能根据主键去查询数据。只有建立索引之后，才能将索引对应的属性作为查询条件进行数据查询。进行数据库版本升级的情况下，之前版本的对象仓库是依然存在的，无需重复创建。如果需要更新对象仓库属性，需要先删除原有对象仓库，再重新创建。
3 创建事务与获取IDBObjectStore对象
indexedDB是事务模式数据库，所有的数据操作，都要在事务中进行。因此在学习数据的增删改查操作之前，我们先看如何新建事务，并获取IDBObjectStore对象。
1.创建事务var transaction = db.transaction(storeNames, mode);
使用IDBDatabase对象实例来调用事务创建函数，第一个参数，可以是一个对象仓库名称的字符串（仅使用到一个对象仓库），或者是一个对象仓库名称的数组（用到一个或多个对象仓库）。第二个参数，指定事务中可以进行的操作类型，包括readonly（只读）和readwrite（可读写）。
2.获取IDBObjectStore对象var objectStore = transaction.objectStore(storeName);
事务创建结束后，获取需要进行操作的对象仓库——IDBObjectStore对象，在这个对象下，进行具体的增删改查操作。
对于多事务处理的情况，事务在被创建的时候就已经开始了，因此对对象仓库的操作顺序，由事务创建的顺序决定。样例参见https://developer.mozilla.org/zh-CN/docs/Web/API/IDBTransaction
4 向对象仓库中新增数据
function add(){
//创建事务
var transaction = db.transcation('person', 'readwrite');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//执行新增操作并返回IDBRequest对象，如果主键设置为自增，参数可不包含主键
var request = objectStore.add({'name': '张三', 'phone': '13910002000'});
request.onsuccess = function(event){
//插入成功
//返回新增数据的主键
console.log(request.result);
}
request.onerror = function(event){
//插入失败，失败的原因可以在event中查看
}
}
add();5 删除对象仓库中的一条数据
function remove(){
//创建事务
var transaction = db.transcation('person', 'readwrite');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//执行删除操作并返回IDBRequest对象，函数的参数为要删除数据的主键，数据类型为Number，或为IDBKeyRange
var request = objectStore.delete(1);
request.onsuccess = function(event){
//删除成功
}
request.onerror = function(event){
//删除失败
}
}
remove();6 查询对象仓库中的一条数据
查询可以依据主键值进行，或者通过创建的索引进行。
1.通过主键进行查询 function get(){
//创建事务
var transaction = db.transcation('person', 'readonly');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//执行查询操作并返回IDBRequest对象，函数的参数为要查询数据的主键，数据类型为Number，或为IDBKeyRange
var request = objectStore.get(1);
request.onsuccess = function(event){
//查询成功
//返回查询结果，满足查询条件的数据对象
console.log(request.result);
}
request.onerror = function(event){
//查询失败
}
}
get();2.通过索引进行查询通过创建的索引进行查询时，需要首先通过IDBObjectStore对象打开某个名称的索引，获取IDBIndex对象，再通过IDBIndex对象进行查询操作。
function get(){
//创建事务
var transaction = db.transcation('person', 'readonly');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//获取IDBIndex对象，参数为索引的名称
var index = objectStore.index('phone_index');
//执行查询操作并返回IDBRequest对象，函数的参数为要查询数据，或为IDBKeyRange
var request = index.get('13910002000');
request.onsuccess = function(event){
//查询成功
//返回查询结果，满足查询条件的数据对象
console.log(request.result);
}
request.onerror = function(event){
//查询失败
}
}
get();7 查询对象仓库中的多条数据
查询多条数据时，有两种方式，第一种是通过IDBObjectStore对象或者IDBIndex对象的getAll方法（indexedDB 2.0），第二种是通过游标进行数据遍历。
1.使用getAll方法 function getAll(){
//创建事务
var transaction = db.transcation('person', 'readonly');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//获取IDBIndex对象，参数为索引的名称
var index = objectStore.index('age_index');
//执行查询操作并返回IDBRequest对象
//函数的第一个参数为要查询数据，或为IDBKeyRange，可选，如果不传则返回所有数据
//函数的第二个参数为要返回的数据数量，可选，如果不加则返回所有满足条件的数据，数据类型为Number，整数
var request = index.getAll('20', 10);
request.onsuccess = function(event){
//查询成功
//返回查询结果，满足查询条件的数据对象数组
console.log(request.result);
}
request.onerror = function(event){
//查询失败
}
}
getAll();2.使用游标遍历数据 function readAll(){
//创建事务
var transaction = db.transcation('person', 'readonly');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//openCursor函数拥有两个可选参数，第一个参数为查询条件
//第二个参数为查询方向，默认为next，还可以设置为prev
//项目基本没有使用这种方式遍历数据，所以具体参数设置/是否可以使用索引等尚未验证，等以后补充
objectStore.openCursor().onsuccess = function(event){
var cursor = event.target.result;
if (cursor) {
console.log('Id: ' + cursor.key);
console.log('Name: ' + cursor.value.name);
console.log('Age: ' + cursor.value.phone);
cursor.continue();
} else {
console.log('没有更多数据了！');
}
}
}
readAll();8 更新对象仓库中的一条数据
function update(){
//创建事务
var transaction = db.transcation('person', 'readwrite');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//执行更新操作并返回IDBRequest对象，函数的参数要更新的数据，包含主键
var request = objectStore.put({'id': 1, 'name': '张三', 'phone': '13910002000'});
request.onsuccess = function(event){
//更新成功
}
request.onerror = function(event){
//更新失败
}
}
update();3.复杂逻辑或问题的解决
通过以上部分的介绍，我们可以掌握indexedDB的基本操作，完成一些简单的、基本的业务需求。然而，我们的业务需求往往不会这么简单，这个部分，根据我在项目中遇到的一些问题，总结一下较为复杂的业务逻辑处理方式。如果各位大拿有更好的处理方式，也希望不吝赐教。
1 关于函数的封装
在上边写的例子中，为了简单的介绍indexedDB操作的各个方法，并没有对其进行严谨的封装。在实际生产应用中，增删改查的操作都应该做好封装，方便复用。简单一点的封装可以把数据库对象、要查询条件对象仓库名称、查询条件、查询成功回调和查询失败回调等设置为函数的参数。好一点的方法，可以考虑使用Promise进行相关操作的封装。
2 关于打开数据库
所有的数据库操作，都需要等待数据库打开成功的回调，拿到IDBDatabase对象的实例之后，才能够进行操作。对于需要用户去操作的情况，用户需要填写数据，或者填写查询数据，等这些耗时的操作完成时，打开数据库操作一般已经完成了，因此不用做什么特别处理也不会出现问题。
但是在页面初始化就需要拿数据的情况，由于打开数据库的操作是异步的，很有可能出现数据库打开还未成功，请求数据库数据的函数就已经开始执行了，导致数据获取失败。因此，比较稳妥的方式，应该是当打开数据库这个异步操作成功执行成功回调时，使用EventEmitter等库进行一个事件触发，让监听这个事件的函数知晓indexedDB已经准备完毕，可以进行相关操作。
3 关于连表查询的问题
在关系型数据库中，可以通过SQL语句完成连表查询，而在indexedDB中，由于没有SQL，无法进行连表查询的操作。如果想要查询到更多的数据，目前我只能通过数据冗余去完成。这就要求在设计数据库的时候，提前把相关的功能逻辑考虑到。
4 关于IDBKeyRange
在基础操作介绍中，对于对象仓库的增删改查中，尤其是在查询操作，函数的参数出了可以为主键值、具体的查询值等，还可以为一个IDBKeyRange对象实例。通过使用IDBKeyRange，我们可以把查询条件约束到一个范围中。IDBKeyRange提供的方法和对应的查询值约束范围包括：
IDBKeyRange.upperBound(x) keys <= x
IDBKeyRange.upperBound(x, ture) keys < x
IDBKeyRange.lowerBound(y) keys >= x
IDBKeyRange.lowerBound(y, ture) keys > x
IDBKeyRange.bound(x, y) keys >= x && keys <= y
IDBKeyRange.bound(x, y, true, ture) keys > x && keys < y
IDBKeyRange.bound(x, y, true, false) keys > x && keys <= y
IDBKeyRange.bound(x, y, false, true) keys >= x && keys < y
IDBKeyRange.only(z) keys = z使用方法为：
function getAll(){
//创建事务
var transaction = db.transcation('person', 'readonly');
//获取IDBObjectStore对象
var objectStore = transaction.objectStore('person');
//获取IDBIndex对象，参数为索引的名称
var index = objectStore.index('age_index');
//获取年龄大于等于10岁小于等于20岁的数据
var request = index.getAll(IDBKeyRange.bound(10, 20));
request.onsuccess = function(event){
//查询成功
//返回查询结果，满足查询条件的数据对象数组
console.log(request.result);
}
request.onerror = function(event){
//查询失败
}
}
getAll();5 关于多条件查询
在关系型数据库中，可以通过以下SQL语句完成多条件查询：select * from person where age = 20 AND name = '张三'
在indexedDB中，没有提供多条件查询的直接方法，想要实现多条件查询，目前一个可行的方法为，创建多属性索引，并借助IDBKeyRange进行查询。
//创建数据仓库时
request.onupgradeneeded = function(event){
var _db = event.target.result;
var objectStore;
if(!_db.objectStoreNames.contains('person')){
objectStore = _db.createObjectStore('person', {
keyPath: 'id',
autoIncrement: true
});
//创建一个多属性索引
objectStore.createIndex('multi_index', ['name', 'age'], {unique: false});
}
}
//进行查询时
function getAll(){
var transaction = db.transcation('person', 'readonly');
var objectStore = transaction.objectStore('person');
var index = objectStore.index('multi_index');
var request = index.getAll(IDBKeyRange.only(['张三', 20]));
request.onsuccess = function(event){
console.log(request.result);
}
request.onerror = function(event){
}
}
getAll();6 关于数据库清除
一旦清楚了浏览器缓存，一切数据都将会被清除。所以，要么核心业务不要过度依赖于indexedDB，要么自己整一套方法机制进行数据的定期向服务器同步，要么。。。你跟用户说一下，不要让他没事清缓存。。。T-T
另外，在隐私模式下，推出浏览器之后，数据也会被清理（没有验证过）。
4. 结语
作为一个以关系型数据库开始学习的人，刚上手去做indexedDB的时候，由于是第一次接触NOSQL，不怎么适应，很多逻辑都已经被关系型数据库和SQL语句给固化了，结果在数据库设计和使用上走了很多弯路，特别蓝瘦。好在我遇到的坑，都已经跳出去了。。。关于indexedDB，我的总结目前就这些了，还想要进一步学习的同学，自己去查阅文档吧。有存在问题的地方，还望各位大拿指正。