简介

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。IndexedDB 为生成 Web Application 提供了丰富的查询能力，使我们的应用在在线和离线时都可以正常工作。

无法开启indexDb的情况

浏览器不希望允许某些广告网络或恶意网站来污染你的计算机，所以浏览器会在任意给定的 web app 首次尝试打开一个 IndexedDB 存储时对用户进行提醒。用户可以选择允许访问或者拒绝访问。
IndexedDB 在浏览器的隐私模式（Firefox 的 Private Browsing 模式和 Chrome 的 Incognito 模式）下是被完全禁止的。

开始使用

打开数据库

首先要判断浏览器是否支持支持indexDb，之后在打开，并生成错误处理函数

let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!indexedDB) {console.log("浏览器不支持indexedDB");
}
// 打开我们的数据库,使用open方法
let request = indexedDB.open("MyTestDatabase");
// 错误处理，onerror函数
request.onerror = function (event) {console.log("error", event);
};

为该数据库创建一个对象仓库

假设我们需要存储用户信息，信息格式为{id:1,name:"张三",email:"1@qq.com"}。那么我们吧仓库命名为"userInfo"
当你创建一个新的数据库或者增加已存在的数据库的版本号， onupgradeneeded 事件会被触发

// 接上面的代码
request.onupgradeneeded = function (event) {var db = event.target.result;// 为该数据库创建一个对象仓库，创建一个名为“userInfo”的仓库，并指定id作为键路径(keyPath)var objectStore = db.createObjectStore("userInfo", {keyPath: "id"});// 建立一个索引来通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引objectStore.createIndex("name", "name", {unique: false});// 使用邮箱建立索引，我们向确保客户的邮箱不会重复，所以我们使用 unique 索引objectStore.createIndex("email", "email", {unique: true});
};

createObjectStore(name, options)函数接收两个参数，第一个参数为仓库的名字，第二个参数是个对象，是可选参数，其中包括以下的属性：

keyPath：指定键路径，需要唯一，可以不指定

autoIncrement：boolean类型，键生成器，是否自动生成，默认false

createIndex(name,keypath,options)接受三个参数
name：索引的名称，可为空
keypath：索引对应的keyPath
options：可选，参数为：

unique：boolean类型，如果为 true，则索引将不允许单个键的重复值。

multiEntry：boolean类型，如果true，则当keyPath解析为数组时，索引将在每个数组元素的索引中添加一个条目。如果 false，它将添加一个包含数组的条目。

locale：目前仅限 Firefox (43+)，为索引指定语言环境

新增数据

上面已经创建好数据库和表了，数据库名：MyTestDatabase，表名：userInfo，浏览器打开F12，Application->IndexDB即可看到，接下来我们为表中增加100条数据。
首先我们先自己造100条数据：

let arr = [];
for (let i = 0; i < 100; i++) {arr.push({id: i,name: "张" + i,email: i + "@qq.com"});
}

之后新增到userInfo表中：

request.onsuccess = function (event) {db = event.target.result;var transaction = db.transaction(["userInfo"], "readwrite");var objectStore = transaction.objectStore("userInfo");for (let i of arr) {objectStore.add(i);}
};

transaction(storeNames, mode, options)表示一个事务。在数据库上创建一个事务，指定作用域（例如要访问的存储对象），并确定所需的访问类型（只读或读写）。接收三个参数：
storeNames：字符串数组，对象库名称，如果只有一个，也可以写字符串不写数组
mode：字符串，可选参数。readonly和readwrite，默认为readonly，表示只读，readwrite表示可以写入。除此之外还有个只用于Firefox的“readwriteflush”，目前实验性的。
options：可选参数，durability: “default”, “strict”, 或 “relaxed”。默认值为"default"。"relaxed"提供了更好的性能，"relaxed"用于临时数据。

objectStore()表示允许访问通过主键查找的 IndexedDB 数据库中的一组数据的对象存储区。为了方便理解，可以把“对象存储空间”想象成关系数据库的“表”结构，下文也会把对象存储空间称为表。

查找数据

可以使用get方法查找到某一条数据

request.onsuccess = function (event) {db = event.target.result;var transaction = db.transaction(["userInfo"]);var objectStore = transaction.objectStore("userInfo");let men1 = objectStore.get(2);men1.onsuccess = function (e) {var data = e.target.result;console.log(data);};
};

使用索引查询

有时候我们并不能确定用户的id，只能通过其他方式去查找，比如我们想查找邮箱为"5@qq.com"的用户，这时候就需要用到索引。
使用索引之前必须确定已经设置了索引，在创建表的时候，我们通过 objectStore.createIndex("email", "email", {unique: true});设置了email的索引

request.onsuccess = function (event) {db = event.target.result;var transaction = db.transaction(["userInfo"]);var objectStore = transaction.objectStore("userInfo");let men1 = objectStore.index("email");// 查找邮箱为‘5@qq.com’的用户men1.get('5@qq.com').onsuccess = function (e) {var data = e.target.result;console.log(data);};
};

index()方法参考objectStore方法一览

使用游标查询

游标的使用方法：

request.onsuccess = function (event) {db = event.target.result;var transaction = db.transaction(["userInfo"]);var objectStore = transaction.objectStore("userInfo");let men1 = objectStore.openCursor();men1.onsuccess = function (e) {var data = e.target.result;if (data) {console.log(data.value);data.continue(); // 使游标下移} else {console.log("No more entries!");}};
};

如果我们要查询id 5-9的数据，不包含5，但包含9

    let men1 = objectStore.openCursor(IDBKeyRange.bound(5,9,true, false));let list=[]men1.onsuccess = function (e) {var data = e.target.result;if (data) {list.push(data.value)data.continue(); // 使游标下移} else {console.log("No more entries!");}console.log(list); // 打印出id是6 7 8 9的数据};

修改数据

使用get方法找到数据并指定为“readwrite”进行修改

request.onsuccess = function (event) {db = event.target.result;var transaction = db.transaction(["userInfo"], "readwrite");var objectStore = transaction.objectStore("userInfo");let men1 = objectStore.get(1);men1.onsuccess = function (e) {// 获取我们想要更新的数据var data = e.target.result;data.name="张三2"console.log(data)objectStore.put(data)};
};

删除数据

通过delete方法删除

request.onsuccess = function (event) {db = event.target.result;var transaction = db.transaction(["userInfo"], "readwrite");var objectStore = transaction.objectStore("userInfo");let men1 = objectStore.delete(1);men1.onsuccess = function (e) {console.log("删除成功")console.log( e)};
};

objectStore方法一览：

方法名	参数	作用
add(value,key)	value:被存储的值.key:标识某条记录的键，如果不指定，它会被设为null	添加一条数据。
clear()		清除表
count(key)	key:键或键范围（key range	计算符合条件的对象的数量
createIndex(name,keyPath,optional)	详见上方为该数据库创建一个对象仓库*	创建并返回新的IDBIndex对象，该方法只能从versionchange事务模式的回调方法中被调用
delete(key)	key:标识记录的键或键范围	从表中删除数据
deleteIndex(indexName)	indexName:要删除的现有索引的名称	删除索引，该方法只能在VersionChange监听函数里面调用。
get(key)	key:键或键范围	从表中检索请求的记录(只返回一条)
index(name)	name:要打开的索引的名称	打开此表中的命名索引
openCursor(range,direction)	range:用作游标范围的键范围。如果此参数未指定或为空，则该范围包括对象存储中的所有记录。direction:游标的方向，包括：“next”（显示所有记录，包括重复记录，从下往上移动），“nextunique”（显示所有记录，不包括重复项，从下往上移动），“prev”（显示所有记录，包括重复记录，从上往下移动），“prevunique”（显示所有记录，不包括重复记录，从上往下移动）	获取一个指针对象
openKeyCursor(range, direction)	同上	获取一个主键指针对象
put(value,key)	value:新数据,key:主键，可为空	更新某个主键对应的数据记录，如果对应的键值不存在，则插入一条新的记录
getKey(key)	key:主键值或 IDBKeyRange 对象	获取主键
getAll(query, count)	query:键或IDBKeyRange,可选，count:返回值的数量,可选	获取对象仓库的记录
getAllKeys(query, coun)	同上	获取所有符合条件的主键

简单封装

原生的indexDB语法比较繁琐，把上面的代码稍微封装一下，方便调用

let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;class DB {constructor(name, version, options) {this._dbs = {};this._databaseName = name;this.currentStore = "";this.open(name, version, options);}open(name, version, options) {if (!indexedDB) {console.error("浏览器不支持indexedDB");return;}return new Promise((resolve, reject) => {if (this._dbs && this._dbs[name]) {resolve(this._dbs[name]);return;}let request = indexedDB.open(name, version);request.onupgradeneeded = (event) => {let db = event.target.result;this._dbs[name] = db;for (let i in options) {// 判断是否存在表if (!db.objectStoreNames.contains(options[i].storeName)) {var objectStore = db.createObjectStore(options[i].storeName, options[i].option);for (let j of options[i].index) {objectStore.createIndex(j.name, j.keyPath, {unique: j.unique});}}}resolve(db);};request.onsuccess = (event) => {// IDBDatabaseconst db = event.target.result;// 缓存起来this._dbs[name] = db;resolve(db);};request.onerror = (event) => {reject(event);console.error('IndexedDB', event);};});}async _getTransaction(storeName, version) {let db;// 先从缓存获取if (this._dbs[this._databaseName]) {db = this._dbs[this._databaseName];} else {db = await this.open(this._databaseName, version);}return db.transaction([storeName], 'readwrite');}async _getObjectStore(storeName, version) {let transaction = await this._getTransaction(storeName, version);return transaction.objectStore(storeName);}// 获取一个storecollection(storeName, version) {this.currentStore = storeName;this._getObjectStore(storeName, version);return this;}add(data) {return new Promise((resolve, reject) => {this._getObjectStore(this.currentStore).then((objectStore) => {const request = objectStore.add(data);request.onsuccess = function (event) {resolve(event.target.result);};request.onerror = (event) => {reject(event);};});});}get(data) {return new Promise((resolve, reject) => {this._getObjectStore(this.currentStore).then((objectStore) => {const request = objectStore.get(data);request.onsuccess = function (event) {resolve(event.target.result);};request.onerror = (event) => {reject(event);};});});}delete(data) {return new Promise((resolve, reject) => {this._getObjectStore(this.currentStore).then((objectStore) => {const request = objectStore.delete(data);request.onsuccess = function (event) {resolve(event.target.result);};request.onerror = (event) => {reject(event);};});});}clear(data) {return new Promise((resolve, reject) => {this._getObjectStore(this.currentStore).then((objectStore) => {const request = objectStore.clear(data);request.onsuccess = function (event) {resolve(event.target.result);};request.onerror = (event) => {reject(event);};});});}put(data) {return new Promise((resolve, reject) => {this._getObjectStore(this.currentStore).then((objectStore) => {const request = objectStore.put(data);request.onsuccess = function (event) {resolve(event.target.result);};request.onerror = (event) => {reject(event);};});});}find(start,end,startInclude,endInclude){return new Promise((resolve, reject) => {this._getObjectStore(this.currentStore).then((objectStore) => {const request = objectStore.openCursor(IDBKeyRange.bound(start,end,startInclude, endInclude));request.onsuccess = function (event) {resolve(event.target.result);};request.onerror = (event) => {reject(event);};});});}// 还可以根据自己需求继续写
}

使用方法：

    let data = [];for (let i = 0; i < 100; i++) {data.push({id: i,name: "张" + i,email: i + "@qq.com"});}let option = [{storeName: "test1",option: {keyPath: "id"},index: [{name: 'id', keyPath: "id", unique: true}, {name: 'name', keyPath: "name", unique: false}, {name: 'emial', keyPath: "emial", unique: true}]}];let db = new DB("myTest", "1", option);const store = db.collection('test1',"1");store.add(data[0]);store.get(data[0].id).then((result) => {console.log(result);});store.add(data[1]);store.add(data[2]);store.delete(data[0].id)

indexDB库

在实际开发中我们可能更倾向于使用现成的轮子，比如

dexie.js：IndexedDB 的包装，通过简单的语法，可以更快地进行代码开发。缺点是官方文档只有英文的
IndexDBWrapper：有中文文档，对indexDB的简单封装，方法较少

大家可以根据实际需求选择自己封装还是直接使用现成的库。

indexDB的使用相关推荐

使用HTML5 IndexDB存储图像和文件
使用IndexedDB存储图像和文件有一天,我们写了关于如何在localStorage中保存图像和文件的文章,它是关于我们今天可用的实用主义. 然而,localStorage有一些性能影响 - 我们 ...
「工具」IndexDB 版备忘录
前言工作日常需要做一些备忘录,记录一些要做的事.在 Mac 上有使用系统的备忘录,但功能偏弱且文本格式调整不方便.再就是使用浏览器找专门的备忘录网站,功能是满足了,但是链路长,没有桌面软件直接. 所 ...
前端 IndexDB 操作入门教程
前端 IndexDB 操作入门教程 idb-js 基于indexdb本地数据库的封装文档地址安装: npm install idb-js --save 使用: 第一步: 引入Idb import ...
前端存储之cookie、localStorage、sessionStorage、indexDB
cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信 ...
各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别
cookie 存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销:但如果这些数据是每个请求都需 ...
本地存储Cookie、Storage、indexDB、ServiceWork离线访问网站
在日常开发中,开发者用得最多的大概是前三种吧,cookie.Session/Local,对后两种运用的较少,话不多少,直接正文: cookie cookie是客户端的解决方案,最早是网景公司的前雇员L ...
VUE + idb-js 应用 indexDB
装包 npm i idb-js 2023-6-13 , 优化一波使用重新封装 table.js 在实际使用中, 发现, idb-js 不支持动态增加表, 因此当存在多个项目使用同一套代码时, 会 ...
Cesium 使用 indexdb
CesiumOfflineCache 这是一个 Cesium 插件,它使用 indexDB 离线缓存技术管理影像图层.地形.3DTiles模型等资源数据. https://github.com/W ...
html5 indexdb api,html5 indexDB实例
IndexedDB是用于客户端的大量的结构化数据存储和使用索引高效率搜索数据的API,它是基于W3C拟定的草案索引数据库的API.相对DOM存储的小存储数据量,IndexedDB具有大容量的数据存储功 ...
php indexdb,前端存储 (4) - IndexDB
IndexDB的出现是为了存储更大量的结构化数据简介 IndexedDB是一个事务型数据库系统,类似于基于SQL的RDBMS. 然而不同的是它使用固定列表(只有 key,value),Indexe ...

indexDB的使用

目录

简介