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 鼓励使用的基本模式如下所示：
- 打开数据库。
- 在数据库中创建一个对象仓库（object store）。
- 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 在操作结果上进行一些操作（可以在 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("删除成功");};
}
![[oeasy]python0094_视频游戏_双人网球_pong_atari_mos_6502_雅达利_米洛华](https://img-blog.csdnimg.cn/img_convert/9c7b5a90a87ce2e9cefe5d6dcdfc5651.png)
