客户端常用的存储方式(三)
IndexedDB
IndexedDB全称是Indexed Database API，用于浏览器中存储结构化数据的。
IndexedDB 是类似于MySQL的数据库， 区别是IndexedDB使用对象存储而不是表格保存数据，使用IndexedDB 数据库的第一步是调用 indexedDB.open()方法，并给它传入一个要打开的数据库名称，如果库已经存在，会发送一个打开它的请求，如果不存在，会创建并打开这个数据库的请求。
demo.js
let db, request, version = 1; request = indexedDB.open("manage", version); request.onerror = (event) => console.log(`open: ${event.target.errorCode}`); request.onsuccess = (event) => { db = event.target.result; }; 复制代码建立了数据库连接之后，下一步就是使用对象存储,如果数据库版本与期待的不一致，那可能需要 创建对象存储。
demo.js
let test = { id: '001', username: "admin", age: "17", } 复制代码从上面的demo看出，id必须是全局唯一的，因为大多数情况下访问数据的凭据。这个键很重要，所以创建对象存储时必须指定一个键。
创建了对象存储之后，剩下的所有操作都是通过事务完成的，创建了对象存储之后，剩下的所有操作都是通过事务完成的。
创建事务demo.js
let transaction = db.transaction(); 复制代码
访问的对象存储的名称:
let transaction = db.transaction("username"); 复制代码参数传入一个字符串数组：
let transaction = db.transaction(["username", "admin"]); 复制代码
每个事务都以只读方式访问数据。要修改访问模式，可以传入第二个参数, 可以是"readonly"、"readwrite"或"versionchange"。
let transaction = db.transaction("username", "readwrite"); 复制代码有了事务的引用，就可以使用 objectStore()方法并传入对象存储的名称以访问特定的对象存储。 然后，可以使用 add()和 put()方法添加和更新对象，使用 get()取得对象，使用 delete()删除对象， 使用 clear()删除所有对象。
事务对象本身也有事件处理程序：onerror 和 oncomplete。
transaction.onerror = (event) => { // 整个事务被取消 }; transaction.oncomplete = (event) => { // 整个事务成功完成 }; 复制代码注意：不能通过 oncomplete 事件处理程序的 event 对象访问 get()请求返回的任何数据。
当我们拿到对象存储的引用，可以使用 add()或 put()写入数据，每次调用 add()或 put()都会创建对象存储的新更新请求，想验证请求成功与否，可以把请求对象保存到一个变量，添加 onerror 和 onsuccess 事件处理程序。
作者：周帅帅
链接：https://juejin.cn/post/7021726536625553421