Book
Search…
IndexedDB

背景

现在浏览器提供了很多存储方案以适应不同的场景。
  • Cookie。大小不超过4KB,且每次请求都会发送回服务器
  • LocalStorage。在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引.存储的数据是永久性的,作用域是限定在文档源(document origin)级别。
  • SessionStorage。作用域同样是限定在文档源中,不过它被限定在窗口中。也就是说,如果同源的文档在不同的浏览器标签页中,那它们互相之间拥有的是各自的sessionStorage数据,无法共享。注意:基于窗口作用域的sessionStorage指的窗口只是顶级窗口。如果一个浏览器标签页包含多个<iframe>元素,它们包含的文档是同源的,两者之间的sessionStorage是可共享的。
如果我们有比较大量数据的存储,这时候indexedDB就派上用场了。
IndexedDB(对象数据库)可以说是浏览器端数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,提供查找接口,还能建立索引。

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,就是学习它的各种对象接口。
1
数据库:IDBDatabase 对象
2
对象仓库:IDBObjectStore 对象
3
索引: IDBIndex 对象
4
事务: IDBTransaction 对象
5
操作请求:IDBRequest 对象
6
指针: IDBCursor 对象
7
主键集合:IDBKeyRange 对象
Copied!
下面是一些主要的概念。
(1)数据库
数据库是一系列相关数据的容器。每个域名(严格的说,是协议 + 域名 + 端口)都可以新建任意多个数据库。
IndexedDB 数据库有版本的概念。同一个时刻,只能有一个版本的数据库存在。如果要修改数据库结构(新增或删除表、索引或者主键),只能通过升级数据库版本完成。
(2)对象仓库
每个数据库包含若干个对象仓库(object store)。它类似于关系型数据库的表格。
(3)数据记录
对象仓库保存的是数据记录。每条记录类似于关系型数据库的行,但是只有主键和数据体两部分。主键用来建立默认的索引,必须是不同的,否则会报错。主键可以是数据记录里面的一个属性,也可以指定为一个递增的整数编号。
1
{ id: 1, text: 'foo' }
Copied!
上面的对象中,id属性可以当作主键。
数据体可以是任意数据类型,不限于对象。
(4)索引
为了加速数据的检索,可以在对象仓库里面,为不同的属性建立索引。
(5)事务
数据记录的读写和删改,都要通过事务完成。事务对象提供errorabortcomplete三个事件,用来监听操作结果。

支持情况

Could not load image
下面我们就来实践一下。

Sources