indexDB（对象接口、异步、支持事务、同源限制、二进制存储、永久存储、打开数据库、初始化数据库、通过事务对数据库进行增删改查操作）

原创

已于 2023-02-10 16:03:14 修改 · 3.8k 阅读

文章标签：

#indexDB数据库使用详解 #同源限制、永久存在、存储空间大 #异步、支持二进制、键值对存储 #利用事务对数据库进行增删改查 #upgradeneeded事件

于 2021-10-30 22:16:14 首次发布

本文详细介绍了IndexedDB的接口、特点、使用方法，包括创建数据库、事务操作、索引利用，以及关键事件的处理。适合开发者深入理解并实现在网页应用中高效存储和检索数据。

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

IDBDatabase.createObjectStore(formName, { keyPath: ID })

IDBObjectStore.createIndex(indeName,property,{unique:boolean})

IDBObjectStore.add(obj)

事务操作

新增数据

IDBDatabase.transaction([formName],'readwrite').objectStore(formName).add(obj)

读取数据

IDBDatabase.transaction([formName]).objectStore(formName).get(primaryValue)

遍历数据

IDBDatabase.transaction([formName]).objectStore(formName).objectStore.openCursor().onsuccess = function (event) {}

更新数据

IDBDatabase.transaction([formName]).objectStore(formName).objectStore.put(obj)

删除数据

IDBDatabase.transaction([formName]).objectStore(formName).objectStore.delete(primaryValue)

使用索引

简介

IndexedDB 是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

可以在网页中F12打开控制台后点击应用并在存储中查看。例如下图：

对象接口

IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。学习这个 API，就是学习它的各种对象接口。

下面是它的所有对象。

操作请求：IDBRequest 对象（open函数返回的对象）
数据库：IDBDatabase 对象（IDBRequest上的result属性）
对象仓库：IDBObjectStore 对象（表名）
索引： IDBIndex 对象（建立后可以通过get方法查找对应数据（未建立前只能通过主键查找））
事务： IDBTransaction 对象（新建数据库后只能通过事务对象上的方法对数据库进行增删改查）
指针： IDBCursor 对象（用于遍历数据库）
主键集合：IDBKeyRange 对象

特点

键值对储存

IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

异步

IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

支持事务

IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

同源限制

IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

储存空间大

IndexedDB 的储存空间比 LocalStorage （2.5MB~10MB）大得多，一般来说不少于 250MB，甚至没有上限。

支持二进制储存

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

永久存在

和localStorage一样，只有手动删除时才会消失。

使用

打开数据库（创建）

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

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

参数：databaseName是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。version是整数，表示数据库的版本。如果省略，打开已有数据库时，不写默认为当前版本，如果版本低于已有数据库版本，会触发error事件；新建数据库时，默认为1。

如图下面为一个IDBRequest对象，只有readyState状态为done时才会触发三种事件方法，当为pending时，任何事件方法都不会触发。result属性对应的是IDBDatabase对象，该对象的name对应databaseName字符串，version对应。

error 事件

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

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

success 事件

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


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

这时，通过request对象的

最低0.47元/天解锁文章