IndexDB入门及封装
背景
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
概括起来，需要一个存储容量大，支持搜索和自定义索引的前端存储方案，就产生了IndexDB。
IndexDB属于非关系型数据库。（不支持SQL查询）
特点
键值对存储（主键必须是唯一的，否则会抛错）
异步（不锁死浏览器）
支持事务（一步失败，取消整个事务，回滚到之前的状态，避免只改了一部分）
同源限制
存储空间大，不少于250M，无上限
支持二进制存储
核心概念
数据库：IDBDatabase 对象，数据库有版本概念，同一时刻只能有一个版本，每个域名可以建多个数据库
对象仓库：IDBObjectStore 对象，类似于关系型数据库的表格
索引： IDBIndex 对象，可以在对象仓库中，为不同的属性建立索引，主键建立默认索引
事务： IDBTransaction 对象，增删改查都需要通过事务来完成，事务对象提供了error,abord,complete三个回调方法，监听操作结果
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象，主键是默认建立索引的属性，可以取当前层级的某个属性，也可以指定下一层对象的属性，还可以是一个递增的整数
操作流程
1.打开数据库
var request = window.indexedDB.open(databaseName, version); 有三个回调方法： request.onerror-返回错误信息 request.onsuccess-返回obj.target.result为数据库对象 request.onupgradeneeded-版本升级，同上
2.新建数据库
新建数据库和打开数据库是同一个操作，如果指定的数据库不存在，就会新建。
通常，新建数据库以后，第一件事就是创建对象仓库（即创建表），通常情况下会先判断是否已经创建这张表。
request.onupgradeneeded = function (event) { db = event.target.result; var objectStore; if (!db.objectStoreNames.contains('person')) { objectStore = db.createObjectStore('person', { keyPath: 'id' }); // var objectStore = db.createObjectStore( // 'person', // { autoIncrement: true } ) }} 复制代码3.开启事务
增删改查都是通过事务实现的，新建事务需要指定表名和操作模式（读写/只读）。
封装创建事务的方法：
startTransaction (tableName, mode = 'readwrite') { //创建transaction有3个要求 // 一、有connection(数据库连接) // 二、storeName(读取的store名) // 三、mode(包括readonly，readwrite和versionchange) this.transaction = this.db.transaction(tableName, mode); this.transaction.oncomplete = () => console.log('transaction complete'); this.transaction.onerror = e => console.log('error', e); } 复制代码事务在被创建的时候就会开启，而不是在请求的时候。
这里要考虑一个问题，如果同时对一个表的同一条数据做操作，是否存在数据覆盖或者丢失的问题。
4.增删改查
// 增 let request = objectStore.add(data); // 查 let request = objectStore.get(id); // 遍历 function readAll() { let objectStore = db.transaction('person').objectStore('person'); objectStore.openCursor().onsuccess = function (event) { let cursor = event.target.result; if (cursor) { console.log('Id: ' + cursor.key); console.log('Name: ' + cursor.value.name); console.log('Age: ' + cursor.value.age); console.log('Email: ' + cursor.value.email); cursor.continue(); } else { console.log('没有更多数据了！'); } }; } // 更新 let request = objectStore.put(obj); // 删除 let request = objectStore.deletet(id); // 通过索引查询 let store = transaction.objectStore('person'); let index = store.index('name'); let request = index.get('李四');
作者：狗子你学废了吗
链接：https://juejin.cn/post/6989864443546959879