IndexedDB 学习

介绍

IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。其实对于在浏览器里存储数据，可以使用 cookies 或 LocalStorage，但它们都是比较简单的技术，而 IndexedDB 提供了类似数据库风格的数据存储和使用方式。

LocalStorage 与 IndexedDB 区别也适用场景

LocalStorage 是用 key-value 键值模式存储数据，它存储的数据都是字符串形式。如果你想让 LocalStorage存储对象，你需要借助 JSON.stringify()能将对象变成字符串形式，再用 JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的，所以它的 api 设计为同步的。
IndexedDB 很适合存储大量数据，它的 API 是异步调用的。IndexedDB 使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。IndexedDB 比 localstorage 强大得多，但它的 API 也相对复杂。对于简单的数据，你应该继续使用 localstorage，但当你希望存储大量数据时，IndexedDB 会明显的更适合，IndexedDB 能提供你更为复杂的查询数据的方式。

indexedDB 的特性

对象仓库

有了数据库后我们自然希望创建一个表用来存储数据，但 indexedDB 中没有表的概念，而是 objectStore，一个数据库中可以包含多个 objectStore，objectStore 是一个灵活的数据结构，可以存放多种类型数据。也就是说一个 objectStore 相当于一张表，里面存储的每条数据和一个键相关联。我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore 可以存储的数据结构也有差异。

事务性

在 indexedDB 中，每一个对数据库操作是在一个事务的上下文中执行的。事务范围一次影响一个或多个 object stores，你通过传入一个 object store 名字的数组到创建事务范围的函数来定义。例如：db.transaction(storeName, 'readwrite')，创建事务的第二个参数是事务模式。当请求一个事务时,必须决定是按照只读还是读写模式请求访问。

基于请求

对 indexedDB 数据库的每次操作，描述为通过一个请求打开数据库,访问一个 object store，再继续。IndexedDB API 天生是基于请求的,这也是 API 异步本性指示。对于你在数据库执行的每次操作,你必须首先为这个操作创建一个请求。当请求完成,你可以响应由请求结果产生的事件和错误。

异步

在 IndexedDB 大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求—响应的模式，所谓异步 API 是指并不是这条指令执行完毕，我们就可以使用 request.result 来获取 indexedDB 对象了，就像使用 ajax 一样，语句执行完并不代表已经获取到了对象，所以我们一般在其回调函数中处理。

几个概念

IDBFactory：数据库工厂，负责打开或者创建数据库
- IDBFactory.open 方法发送一个打开或者创建一个数据库的请求
- IDBFactory.deleteDatabase 方法：发送一个删除数据库的请求
IDBDatabase: 数据库
- IDBDatabase.close 方法关闭数据库。
- IDBDatabase.createObjectStore 方法创建 store，相当于表
- IDBDatabase.transaction 开启一个事务。
IDBIndex：数据库表的索引
IDBObjectStore：数据库表
IDBTransaction：事务
IDBRequest：机会是所有 indexedDB 操作的返回值，indexedDB 操作请求
- IDBRequest.result 结果
- IDBRequest.onerror 异常事件
- IDBRequest.onsuccess 成功的事件

快速入门 demo

打开数据库实例。

var db; // 全局的indexedDB数据库实例。

//1\. 获取IDBFactory接口实例（文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBFactory）
var indexedDB =
  window.indexedDB ||
  window.webkitIndexedDB ||
  window.mozIndexedDB ||
  window.msIndexedDB;

if (!indexedDB) {
  console.log('你的浏览器不支持IndexedDB');
}

// 2\. 通过IDBFactory接口的open方法打开一个indexedDB的数据库实例
// 第一个参数： 数据库的名字，第二个参数：数据库的版本。返回值是一个：IDBRequest实例,此实例有onerror和onsuccess事件。
var IDBOpenDBRequest = indexedDB.open('demoDB', 1);

// 3\. 对打开数据库的事件进行处理

// 打开数据库成功后，自动调用onsuccess事件回调。
IDBOpenDBRequest.onsuccess = function(e) {};

// 打开数据库失败
IDBOpenDBRequest.onerror = function(e) {
  console.log(e.currentTarget.error.message);
};

// 第一次打开成功后或者版本有变化自动执行以下事件：一般用于初始化数据库。
IDBOpenDBRequest.onupgradeneeded = function(e) {
  db = e.target.result; // 获取到 demoDB对应的 IDBDatabase实例,也就是我们的数据库。

  if (!db.objectStoreNames.contains(personStore)) {
    //如果表格不存在，创建一个新的表格（keyPath，主键 ； autoIncrement,是否自增），会返回一个对象（objectStore）
    // objectStore就相当于数据库中的一张表。IDBObjectStore类型。
    var objectStore = db.createObjectStore(personStore, {
      keyPath: 'id',
      autoIncrement: true
    });

    //指定可以被索引的字段，unique字段是否唯一。类型： IDBIndex
    objectStore.createIndex('name', 'name', {
      unique: true
    });
    objectStore.createIndex('phone', 'phone', {
      unique: false
    });
  }
  console.log('数据库版本更改为： ' + dbVersion);
};

数据库的 objectStore 添加

indexedDB 的增删改查的操作需要放到一个事务中进行（推荐）

// 创建一个事务，类型：IDBTransaction，文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
var transaction = db.transaction(personStore, 'readwrite');

// 通过事务来获取IDBObjectStore
var store = transaction.objectStore(personStore);

// 往store表中添加数据
var addPersonRequest = store.add({
 name: '老马',
 phone: '189111833',
 address: 'aicoder.com'
});

// 监听添加成功事件
addPersonRequest.onsuccess = function(e) {
 console.log(e.target.result); // 打印添加成功数据的 主键（id）
};

// 监听失败事件
addPersonRequest.onerror = function(e) {
 console.log(e.target.error);
};

数据库的 objectStore 修改

// 创建一个事务，类型：IDBTransaction，文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
var transaction = db.transaction(personStore, 'readwrite');

// 通过事务来获取IDBObjectStore
var store = transaction.objectStore(personStore);
var person = {
 id: 6,
 name: 'lama',
 phone: '515154084',
 address: 'aicoder.com'
};

// 修改或者添加数据。 第一参数是要修改的数据，第二个参数是主键（可省略)
var updatePersonRequest = store.get(6);

// 监听添加成功事件
updatePersonRequest.onsuccess = function(e) {
 // var p = e.target.result;  // 要修改的原对象
 store.put(person);
};

// 监听失败事件
updatePersonRequest.onerror = function(e) {
 console.log(e.target.error);
};

数据库的 objectStore 删除

// 创建一个事务，类型：IDBTransaction，文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
var transaction = db.transaction(personStore, 'readwrite');

// 通过事务来获取IDBObjectStore
var store = transaction.objectStore(personStore);
store.delete(6).onsuccess = function(e) {
 console.log(删除成功！)
};

根据 id 获取数据

// 创建一个事务，类型：IDBTransaction，文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
var transaction = db.transaction(personStore, 'readwrite');

// 通过事务来获取IDBObjectStore
var store = transaction.objectStore(personStore);
store.get(6).onsuccess = function(e) {
  console.log(删除成功！)
};

数据库的 objectStore 游标查询

var trans = db.transaction(personStore, 'readwrite');
var store = trans.objectStore(personStore);
var cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(e) {
  var cursor = e.target.result;
  if (cursor) {
    var html = template('tbTmpl', cursor.value);
    document.getElementById('tbd').innerHTML += html;
    cursor.continue(); // 游标继续往下 搜索，重复触发 onsuccess方法，如果到最后返回null
  }
};

IndexedDB 学习