indexDB

1 新建数据库

第一件事是：.open() 打开数据库 不存在的话会新建

const request = indexedDB.open('admin', version);  // version 版本默认1
1

2 设置对象存储（数据库实例）

拿到数据库对象 db
设置主键
主键自增

// 数据库创建或升级的时候会触发
request.onupgradeneeded = function (event) {
  console.log("onupgradeneeded");
  db = event.target.result; // 数据库对象
  var objectStore;
  // 创建存储库
  objectStore = db.createObjectStore("myFirstDB", {
    keyPath: "Id", // 这是主键
    autoIncrement: true // 实现自增
  });
};
1
2
3
4
5
6
7
8
9
10
11

3 创建事务，新增数据

所有的操作都是通过事务完成的
事务要通过 transaction() 方法创建，并赋予权限：readonly / readwrite / versionchange
随后使用 objectStore() 传入对象存储的名称，对该对象存储进行操作
如 .add() 插入数据

function addData (db, storeName, data) {

  var request = db
    .transaction([storeName], "readwrite") // 创建事务对象 指定表格名称和操作模式（"只读"或"读写"）
    .objectStore(storeName) // 对象存储的名称
    .add(data);   // 添加的数据

  request.onsuccess = function (event) {
    console.log("数据写入成功");
  };

  request.onerror = function (event) {
    console.log("数据写入失败");
  };
}

// 执行方法
addData(res, 'myFirstDB', { a: 'asdsa' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4 通过主键查询数据

/**
 * 通过主键读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} key 主键值
 */
function getDataByKey (db, storeName, key) {
  return new Promise((resolve, reject) => {
    var transaction = db.transaction([storeName]); // 事务
    var objectStore = transaction.objectStore(storeName); // 仓库对象
    var request = objectStore.get(key); // 通过主键获取数据

    request.onerror = function (event) {
      console.log("事务失败");
    };

    request.onsuccess = function (event) {
      console.log("主键查询结果: ", request.result);
      resolve(request.result);
    };
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5 通过游标查询多条数据

前面使用 .get(key); // 通过主键获取数据
但只能获取一条数据
如果想取得多条数据，需要创建一个游标

通过 .openCursor(); 创建一个游标
onsuccess 事件中通过 e.target.result 访问对象存储中的下一条数据

• 属性：
• direction
• key 键
• value 值
• primaryKey

/**
 * 通过游标读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 */
function cursorGetData (db, storeName) {
  let list = [];
  var store = db
    .transaction(storeName, "readwrite") // 事务
    .objectStore(storeName); // 仓库对象
  var request = store.openCursor(); // 指针对象
  // 游标开启成功，逐行读数据
  request.onsuccess = function (e) {
    var cursor = e.target.result;
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      cursor.continue(); // 遍历了存储对象中的所有内容
    } else {
      console.log("游标读取的数据：", list);
    }
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23