2023年11月26日发(作者：)
indexDB的⽤法
本⽂转⾃，为了⽅便个⼈整理学习笔记所⽤
⼀、概述
随着浏览器的功能不断增强，越来越多的⽹站开始考虑，将⼤量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数
据。
现有的浏览器数据储存⽅案，都不适合储存⼤量数据：Cookie 的⼤⼩不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB
到 10MB 之间（各家浏览器不同），⽽且不提供搜索功能，不能建⽴⾃定义的索引。所以，需要⼀种新的解决⽅案，这就是 IndexedDB 诞
⽣的背景。
通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被⽹页脚本创建和操作。IndexedDB 允许储存⼤量数据，提供查找接⼝，还
能建⽴索引。这些都是 LocalStorage 所不具备的。就数据库类型⽽⾔，IndexedDB 不属于关系型数据库（不⽀持 SQL 查询语句），更接近
NoSQL 数据库。
IndexedDB 具有以下特点。
（1）键值对储存。 IndexedDB 内部采⽤对象仓库（object store）存放数据。所有类型的数据都可以直接存⼊，包括 JavaScript 对象。对
象仓库中，数据以"键值对"的形式保存，每⼀个数据记录都有对应的主键，主键是独⼀⽆⼆的，不能有重复，否则会抛出⼀个错误。
（2）异步。 IndexedDB 操作时不会锁死浏览器，⽤户依然可以进⾏其他操作，这与 LocalStorage 形成对⽐，后者的操作是同步的。异步
设计是为了防⽌⼤量数据的读写，拖慢⽹页的表现。
（3）⽀持事务。 IndexedDB ⽀持事务（transaction），这意味着⼀系列操作步骤之中，只要有⼀步失败，整个事务就都取消，数据库回滚
到事务发⽣之前的状态，不存在只改写⼀部分数据的情况。
（4）同源限制 IndexedDB 受到同源限制，每⼀个数据库对应创建它的域名。⽹页只能访问⾃⾝域名下的数据库，⽽不能访问跨域的数据
库。
（5）储存空间⼤ IndexedDB 的储存空间⽐ LocalStorage ⼤得多，⼀般来说不少于 250MB，甚⾄没有上限。
（6）⽀持⼆进制储存。 IndexedDB 不仅可以储存字符串，还可以储存⼆进制数据（ArrayBuffer 对象和 Blob 对象）。
⼆、基本概念
IndexedDB 是⼀个⽐较复杂的 API，涉及不少概念。它把不同的实体，抽象成⼀个个对象接⼝。学习这个 API，就是学习它的各种对象接
⼝。
数据库：IDBDatabase 对象
对象仓库：IDBObjectStore 对象
索引： IDBIndex 对象
事务： IDBTransaction 对象
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象
下⾯是⼀些主要的概念。
（1）数据库
数据库是⼀系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端⼝）都可以新建任意多个数据库。
IndexedDB 数据库有版本的概念。同⼀个时刻，只能有⼀个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），
只能通过升级数据库版本完成。
（2）对象仓库
每个数据库包含若⼲个对象仓库（object store）。它类似于关系型数据库的表格。
（3）数据记录
对象仓库保存的是数据记录。每条记录类似于关系型数据库的⾏，但是只有主键和数据体两部分。主键⽤来建⽴默认的索引，必须是不同
的，否则会报错。主键可以是数据记录⾥⾯的⼀个属性，也可以指定为⼀个递增的整数编号。
{ id: 1, text: 'foo' }
上⾯的对象中，属性可以当作主键。
id
数据体可以是任意数据类型，不限于对象。
（4）索引
为了加速数据的检索，可以在对象仓库⾥⾯，为不同的属性建⽴索引。
（5）事务
数据记录的读写和删改，都要通过事务完成。事务对象提供、和三个事件，⽤来监听操作结果。
errorabortcomplete
三、操作流程
IndexedDB 数据库的各种操作，⼀般是按照下⾯的流程进⾏的。这个部分只给出简单的代码⽰例，⽤于快速上⼿，详细的各个对象的 API
请看。
3.1 打开数据库
使⽤ IndexedDB 的第⼀步是打开数据库，使⽤⽅法。
()
var request = (databaseName, version);
这个⽅法接受两个参数，第⼀个参数是字符串，表⽰数据库的名字。如果指定的数据库不存在，就会新建数据库。第⼆个参数是整数，表⽰
数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为。
1
()errorsuccessupgradeneeded
⽅法返回⼀个 IDBRequest 对象。这个对象通过三种事件、、，处理打开数据库的操作结果。
（1）error 事件
error
事件表⽰打开数据库失败。
r = function (event) {
('数据库打开报错');
};
（2）success 事件
success
事件表⽰成功打开数据库。
var db;
ess = function (event) {
db = ;
('数据库打开成功');
};
这时，通过对象的属性拿到数据库对象。
requestresult
（3）upgradeneeded 事件
如果指定的版本号，⼤于数据库的实际版本号，就会发⽣数据库升级事件。
upgradeneeded
var db;
adeneeded = function (event) {
db = ;
}
这时通过事件对象的属性，拿到数据库实例。
3.2 新建数据库
新建数据库与打开数据库是同⼀个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在事件的监听
upgradeneeded
函数⾥⾯完成，因为这时版本从⽆到有，所以会触发这个事件。
通常，新建数据库以后，第⼀件事是新建对象仓库（即新建表）。
更好的写法是先判断⼀下，这张表格是否存在，如果不存在再新建。
adeneeded = function (event) {
db = ;
var objectStore;
if (!ns('person')) {
objectStore = ObjectStore('person', { keyPath: 'id' });
}
}
主键（key）是默认建⽴索引的属性。⽐如，数据记录是，那么属性可以作为主键。主键也可以指定为下⼀层对象的属
{ id: 1, name: '张三' }id
性，⽐如的也可以指定为主键。
{ foo: { bar: 'baz' } }
如果数据记录⾥⾯没有合适作为主键的属性，那么可以让 IndexedDB ⾃动⽣成主键。
var objectStore = ObjectStore(
'person',
{ autoIncrement: true }
);
上⾯代码中，指定主键为⼀个递增的整数。
新建对象仓库以后，下⼀步可以新建索引。
adeneeded = function(event) {
db = ;
var objectStore = ObjectStore('person', { keyPath: 'id' });
Index('name', 'name', { unique: false });
Index('email', 'email', { unique: true });
}
上⾯代码中，的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。
Index()
3.3 新增数据
新增数据指的是向对象仓库写⼊数据记录。这需要通过事务完成。
function add() {
var request = ction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: '' });
ess = function (event) {
('数据写⼊成功');
};
r = function (event) {
('数据写⼊失败');
}
}
add();
上⾯代码中，写⼊数据需要新建⼀个事务。新建时必须指定表格名称和操作模式（"只读"或"读写"）。新建事务以后，通
('Email: ' + );
} else {
('未获得数据记录');
}
};
}
read();
上⾯代码中，⽅法⽤于读取数据，参数是主键的值。
()
3.5 遍历数据
遍历数据表格的所有记录，要使⽤指针对象 IDBCursor。
function readAll() {
var objectStore = ction('person').objectStore('person');
rsor().onsuccess = function (event) {
var cursor = ;
if (cursor) {
('Id: ' + );
('Name: ' + );
('Age: ' + );
('Email: ' + );
ue();
} else {
('没有更多数据了！');
}
索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建⽴索引，默认只能搜索主键（即从主键取值）。
假定新建表格的时候，对字段建⽴了索引。
name
Index('name', 'name', { unique: false });
现在，就可以从找到对应的数据记录了。
name
var transaction = ction(['person'], 'readonly');
var store = Store('person');
发布评论