IndexDB 浏览器服务器

IndexDB 浏览器服务器

文章部分内容引用：

https://www.ruanyifeng.com/blog/2018/07/indexeddb.html

https://juejin.cn/post/7026900352968425486#heading-15

基本概念

• 数据库：IDBDatabase 对象
• 对象仓库：IDBObjectStore 对象
• 索引： IDBIndex 对象
• 事务： IDBTransaction 对象
• 操作请求：IDBRequest 对象
• 指针： IDBCursor 对象
• 主键集合：IDBKeyRange 对象

（1）数据库

数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。

IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。

（2）对象仓库

每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。

（3）数据记录

对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号。

{ id: 1, text: 'foo' }

上面的对象中，id属性可以当作主键。

数据体可以是任意数据类型，不限于对象。

（4）索引

为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。

（5）事务

数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。

操作流程

IndexedDB 鼓励使用的基本模式如下所示：

1. 打开数据库。
2. 在数据库中创建一个对象仓库（object store）。
3. 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
4. 通过监听正确类型的 DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作（可以在 request 对象中找到）

打开数据库

由于 IndexedDB 本身的规范还在持续演进中，当前的 IndexedDB 的实现还是使用浏览器前缀。

在规范更加稳定之前，浏览器厂商对于标准 IndexedDB API 可能都会有不同的实现。但是一旦大家对规范达成共识的话，厂商就会不带前缀标记地进行实现。

实际上一些实现已经移除了浏览器前缀：IE 10，Firefox 16 和 Chrome 24。

当使用前缀的时候，基于 Gecko 内核的浏览器使用 moz 前缀，基于 WebKit 内核的浏览器会使用 webkit 前缀。

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

使用 IndexedDB 的第一步是打开数据库，使用indexedDB.open()方法

var request = window.indexedDB.open(databaseName, version);

这里传入两个参数：

• databaseName:字符串，表示数据库的名字;如果指定的数据库不存在，就会新建数据库。
• version:整数，表示数据库的版本，默认为当前版本；新建数据库时，默认为1

indexedDB.open()方法返回一个IDBRequest对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。

（1）error 事件

error事件表示打开数据库失败。

 request.onerror = function (event) {console.log('数据库打开报错');};

（2）success 事件

success事件表示成功打开数据库。

var db;
request.onsuccess = function (event) {db = request.result;console.log('数据库打开成功');
};

这时，通过request对象的result属性拿到数据库对象。

（3）upgradeneeded 事件

如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。

如果 onupgradeneeded事件成功执行完成，打开数据库请求的 onsuccess 处理函数会被触发。

var db;
request.onupgradeneeded = function (event) {db = event.target.result;
}

这时通过事件对象的target.result属性，拿到数据库实例。

---

/*** 打开数据库* @param {string} dbName 数据库的名字* @param {string} version 数据库的版本* @return {object} 该函数会返回一个数据库实例*/
function openDB(dbName, storeName, version) {return new Promise((resolve, reject) => {//  兼容浏览器var indexedDB =window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;let db;// 打开数据库，如果没有则被创建const request = indexedDB.open(dbName, (version = 1));// 数据库成功打开的回调request.onsuccess = function (event) {db = event.target.result;resolve(db);console.log("数据库成功打开");};// 数据库打开失败的回调request.onerror = function (event) {console.error("数据库打开失败");};request.onupgradeneeded = function (event) {console.log("数据库更新");db = event.target.result;// 更好的写法是先判断一下，这存储库是否存在，如果不存在再新建if (!db.objectStoreNames.contains("user")) {// 创建存储库const objectStore = db.createObjectStore("user", {keyPath: "userId", // 主键// autoIncrement:true // 实现自增});// 创建索引，在后面查询数据的时候可以根据索引查objectStore.createIndex("userid", "userId", { unique: true }); // unique是否唯一objectStore.createIndex("name", "name", { unique: false });objectStore.createIndex("age", "age", { unique: false });}};});
}

新增数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

事务提供了三种模式：readonly、readwrite 和 versionchange。

想要修改数据库模式或结构——包括新建或删除对象仓库或索引，只能在 versionchange 事务中才能实现。

该事务由一个指定了 version 的 IDBFactory.open 方法启动。（在仍未实现最新标准的 WebKit 浏览器，IDBFactory.open 方法只接受一个参数，即数据库的 name，这样你必须调用 IDBVersionChangeRequest.setVersion 来建立 versionchange 事务。

使用 readonly 或 readwrite 模式都可以从已存在的对象仓库里读取记录。但只有在 readwrite 事务中才能修改对象仓库。

你需要使用 IDBDatabase.transaction (en-US) 启动一个事务。该方法接受两个参数：storeNames (作用域，一个你想访问的对象仓库的数组），事务模式 mode（readonly 或 readwrite）。该方法返回一个包含 IDBIndex.objectStore (en-US) 方法的事务对象，使用 IDBIndex.objectStore (en-US) 你可以访问你的对象仓库。未指定 mode 时，默认为 readonly 模式。

• error 事件是冒泡机制，所以事务会接收由它产生的所有请求所产生的错误。更微妙的一点，错误会中断它所处的事务。除非你在错误发生的第一时间就调用了 stopPropagation 并执行了其他操作来处理错误，不然整个事务将会回滚。
• 如果你在事务中没有处理一个已发生的错误或者调用 abort 方法，那么该事务会被回滚，并触发 abort 事件。
• 在所有请求完成后，事务的 complete 事件会被触发。

function addData(db, storeName, data) {const request = db.transaction([storeName], "readwrite").objectStore("user").add(data || { userId: 1, name: "张三", age: 18 });request.onsuccess = function (event) {console.log("数据写入成功");};request.onerror = function (event) {console.error("数据写入失败，原因：", event.target.error);};
}

通过主键删除数据

IDBObjectStore.delete()方法用于删除记录。

/*** * @param {IDBObjectStore} db  数据库实例* @param {string} storeName 仓库名称* @param {string} key 主键值 */function remove(db,storeName,key) {var request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(key);request.onsuccess = function (event) {console.log('数据删除成功');};
}

更新数据

put方法接收一个数据对象。

/*** 更新数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {object} data 数据*/
function updateDB(db, storeName, data) {var request = db.transaction([storeName], "readwrite") // 事务对象.objectStore(storeName) // 仓库对象.put(data);request.onsuccess = function () {console.log("数据更新成功");};request.onerror = function () {console.log("数据更新失败");};
}

通过主键读取数据

现在数据库里已经有了一些信息，你可以通过几种方法对它进行提取。首先是简单的 get()。你需要提供键来提取值，像这样：

主键即刚刚我们在创建数据库时声明的keyPath，通过主键只能查询出一条数据。

/*** 通过主键读取数据* @param {IDBObjectStore} 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.error("主键查询结果: ", request.result);resolve(request.result);};});
}

通过游标查询数据

/*** 通过游标读取数据* @param {IDBObjectStore} 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);}};
}

上面函数开启了一个游标，然后逐行读取数据，存入数组，最终得到整个仓库的所有数据。

通过索引查询数据

// 首先，确定你已经在 request.onupgradeneeded 中创建了索引：
// objectStore.createIndex("name", "name");
// 否则你将得到 DOMException。var index = objectStore.index("name");index.get("Donna").onsuccess = function(event) {alert("Donna's SSN is " + event.target.result.ssn);
};

索引名称即我们创建仓库的时候创建的索引名称，也就是键值对中的键，最终会查询出所有满足我们传入函数索引值的数据。

/*** 通过索引读取数据* @param {IDBObjectStore} db 数据库实例* @param {string} storeName 仓库名称* @param {string} indexName 索引名称* @param {string} indexValue 索引值*/
function getDataByIndex(db, storeName, indexName, indexValue) {var store = db.transaction(storeName, "readwrite").objectStore(storeName);var request = store.index(indexName).get(indexValue);request.onerror = function () {console.error("事务失败");};request.onsuccess = function (e) {var result = e.target.result;console.log("索引查询结果：", result);};
}

指定游标的范围和方向

如果你想要限定你在游标中看到的值的范围，你可以使用一个 key range 对象然后把它作为第一个参数传给 openCursor() 或 openKeyCursor()。

// 仅匹配 "Donna"
var singleKeyRange = IDBKeyRange.only("Donna");// 匹配所有超过“Bill”的，包括“Bill”
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");// 匹配所有超过“Bill”的，但不包括“Bill”
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);// 匹配所有不超过“Donna”的，但不包括“Donna”
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);// 匹配所有在“Bill”和“Donna”之间的，但不包括“Donna”
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);// 使用其中的一个键范围，把它作为 openCursor()/openKeyCursor 的第一个参数
index.openCursor(boundKeyRange).onsuccess = function(event) {var cursor = event.target.result;if (cursor) {// 当匹配时进行一些操作cursor.continue();}
};

删除数据库

/*** 删除数据库* @param {object} dbName 数据库名称*/
function deleteDBAll(dbName) {console.log(dbName);let deleteRequest = window.indexedDB.deleteDatabase(dbName);deleteRequest.onerror = function (event) {console.log("删除失败");};deleteRequest.onsuccess = function (event) {console.log("删除成功");};
}