IndexDB入门及封装背景现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请

背景

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

概括起来，需要一个存储容量大，支持搜索和自定义索引的前端存储方案，就产生了IndexDB。

IndexDB属于非关系型数据库。（不支持SQL查询）

特点

键值对存储（主键必须是唯一的，否则会抛错）
异步（不锁死浏览器）
支持事务（一步失败，取消整个事务，回滚到之前的状态，避免只改了一部分）
同源限制
存储空间大，不少于250M，无上限
支持二进制存储

核心概念

数据库：IDBDatabase 对象，数据库有版本概念，同一时刻只能有一个版本，每个域名可以建多个数据库
对象仓库：IDBObjectStore 对象，类似于关系型数据库的表格
索引： IDBIndex 对象，可以在对象仓库中，为不同的属性建立索引，主键建立默认索引
事务： IDBTransaction 对象，增删改查都需要通过事务来完成，事务对象提供了error,abord,complete三个回调方法，监听操作结果
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象，主键是默认建立索引的属性，可以取当前层级的某个属性，也可以指定下一层对象的属性，还可以是一个递增的整数

操作流程

1.打开数据库

var request = window.indexedDB.open(databaseName, version); 有三个回调方法： request.onerror-返回错误信息 request.onsuccess-返回obj.target.result为数据库对象 request.onupgradeneeded-版本升级，同上

2.新建数据库

新建数据库和打开数据库是同一个操作，如果指定的数据库不存在，就会新建。

通常，新建数据库以后，第一件事就是创建对象仓库（即创建表），通常情况下会先判断是否已经创建这张表。

request.onupgradeneeded = function (event) { 
  db = event.target.result; 
  var objectStore; 
  if (!db.objectStoreNames.contains('person')) { 
    objectStore = db.createObjectStore('person', { keyPath: 'id' }); 
    // var objectStore = db.createObjectStore( 
    // 'person', 
    // { autoIncrement: true }
  ) 
}}

3.开启事务

增删改查都是通过事务实现的，新建事务需要指定表名和操作模式（读写/只读）。

封装创建事务的方法：

startTransaction (tableName, mode = 'readwrite') { 
  //创建transaction有3个要求 
  // 一、有connection(数据库连接) 
  // 二、storeName(读取的store名) 
  // 三、mode(包括readonly，readwrite和versionchange) 
  this.transaction = this.db.transaction(tableName, mode); 
  this.transaction.oncomplete = () => console.log('transaction complete'); 
  this.transaction.onerror = e => console.log('error', e); }

事务在被创建的时候就会开启，而不是在请求的时候。

这里要考虑一个问题，如果同时对一个表的同一条数据做操作，是否存在数据覆盖或者丢失的问题。

4.增删改查

// 增 
let request = objectStore.add(data); 
// 查 
let request = objectStore.get(id); 
// 遍历 
function readAll() {
  let objectStore = db.transaction('person').objectStore('person');
  objectStore.openCursor().onsuccess = function (event) {
    let cursor = event.target.result;
    if (cursor) {
      console.log('Id: ' + cursor.key);
      console.log('Name: ' + cursor.value.name);
      console.log('Age: ' + cursor.value.age);
      console.log('Email: ' + cursor.value.email);
      cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  }; 
}
// 更新 
let request = objectStore.put(obj); 
// 删除 
let request = objectStore.deletet(id); 
// 通过索引查询 
let store = transaction.objectStore('person');
let index = store.index('name');
let request = index.get('李四');