indexDB 基础使用

indexDB 使用方法

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

流程

step 1 打开（新建）数据库

• 创建 indexDB 开启指令的实例对象

var DBrequest = window.indexedDB.open('localData'),
    // 用于记录打开的数据库对象
    DBresult;

• 监听开启结果，分为：

  • onsuccess 开启成功
  • onerror 开启失败
  • onupgradeneeded 打开失败-原因没有数据库 or 数据库版本过低，执行升级 or 新建

  执行新建命令后，onupgradeneeded 指令会比 onsuccess 先执行

  Tips：indexDB 不同版本的数据库是不同的

// 开启成功
DBrequest.onsuccess = function (ev) {
    console.log('success', ev.target.result);
    // 保存数据库的对象
    DBresult = ev.target.result;
};

// 开启失败
DBrequest.onerror = function (ev) {
    console.log('error', ev.target.result);
};

// 版本过低，自动升级 & 新建数据库后进入
DBrequest.onupgradeneeded = function (ev) {
    // 保存新建立的数据库对象，并直接用于新建数据表中
    DBresult = ev.target.result;
    console.log('upgrading', DBrequest);

    // TODO: 可在此处新建数据表  
};

step 2 新建数据表

新建数据表只能在新建数据库下执行

在新建数据表之前，可以先检查一次数据表是否已存在

if (!DBresult.objectStoreNames.contains('testTable')) {
    // 新建数据表testTable，并设置主键为id
    let objectStore = DBresult.createObjectStore('testTable', {keyPath: 'id'});
    // 设置索引
    objectStore.createIndex('time', 'time', {unique: false});
}

step 3 增删查改

indexDB 的增删查改操作都是通过事务实现的

即 transaction，也就是在进行增删查改操作前，需新建一个事务：

let DBstore = DBresult.transaction('testTable', 'readwrite')
				.objectStore('testTable');

transaction(..) 新建一个事务，该方法接受的第一个参数是要进行操作的目标数据表，第二个参数是当前操作的权限（readonly 只读，readwrite 读写）；

readonly 只能应用在读取功能上

readwrite 可以用于所有功能

.objectStore(..) 新建一个对象库（object store），对象库中的记录根据其键值进行排序，并通过排序实现快速插入，查找和有序检索；

• 新增数据

  每次只能添加一条数据

  每添加一条数据需要重新声明 DBstore，否则会报“主键重复”错误

let insertData = {
    id: '001',
    name: 'tom',
    time: '20191011'
},	
    // 添加的数据实例，用于监听添加结果
    DBaddstore;

// 插入数据
DBaddstore = DBstore.add(insertData);

/* 当用循环添加多条数据时，记得要在每次循环处重新调用一次DBstore
 * DBresult.transaction('testTable', 'readwrite')
				.objectStore('testTable')
				.add(...)
*/

// 监听插入结果
	// 插入成功
DBaddstore.onsuccess = function(ev) {..};
	// 插入失败
DBaddstore.onerror = function(ev) {..};

• 删除数据

  删除指定键值的单条数据

let deleteKey = '002',
    // 删除的数据实例，用于监听删除结果
    DBelstore;

// 删除数据
DBdelstore = DBstore.delete(deleteKey);

// 监听删除结果
	// 删除成功
DBdelstore.onsuccess = function(ev) {..}
	// 删除失败
DBdelstore.onerror = function(ev) {..}

• 读取数据

  读取数据分为读取指定数据和读取全部数据

  • 读取指定索引数据
    • 使用 index(key).get(value) 方法，获取指定索引下的单条数据
    • 使用 index(key).getAll(value) 方法，获取指定索引下的多条数据

  let key = {
      index: 'time',
      value: '20111111'
  },
      // 获取数据的实例，用于监听获取结果 & 获取查找到的数据
      DBgetstore;
  
  if (!!key) {
      // 获取time索引为20111111的所有数据
      DBgetstore = DBstore.index(key.index).getAll(key.value);
      
      // 获取time索引为20111111的第一条数据
      DBgetstore = DBstore.index(key.index).get(key.value);
  }
  

  • 读取全部数据

  使用 getAll() 方法，获取数据库内所有数据

  let DBgetstore = DBstore.getAll();
  

  • 处理并使用读取到的数据

  // 读取成功
  DBgetstore.onsuccess = function(ev) {
      console.log('getLocalData success!', ev.target.result);
      // 处理读取到的数据
      dosomething(ev.target.result);
  }
  
  // 读取失败
  DBgetstore.onerror = function(ev) {..}
  

• 修改数据（暂未使用到此功能）