IndexedDB 数据库用法

2019-6-9 21:59| 作者: admin| 查看: 646| 评论: 0|来自: 钱柜手机网页版

关于IndexedDB数据库概述可以参阅IndexedDB 数据库概述一章节。

本文将在总体上介绍一下IndexedDB数据的用法,目的是让读者能够大致掌握数据库的使用流程。

考虑到篇幅问题,本文不会对具体技术细节做过多介绍,更多内容可以参阅对应的相关文章。

一.数据的打开与新建:

在利用本地IndexedDB数据库之前,需要打开一个数据库,如果没有则需要新建。

通过indexedDB.open方法即可打开或者新建一个数据库,indexedDB属于window对象。

语法结构:

[JavaScript] 纯文本查看 复制代码
let request = window.indexedDB.open(databaseName, version);

由于indexedDB属于window对象,所以在调用时可以将window省略。

参数解析:

(1).databaseName:必需,用于规定数据库的名称。

(2).version:可选,用于规定数据库的版本,一个数值类型。

通过上述方式可以打开指定名称与版本的IndexedDB数据库。

如果无对应数据库则会通过上述方法新建一个数据库,打开与新建数据库都采用indexedDB.open方法。

需要注意的是,此方法是一个异步操作,类似于AJAX请求,返回的结果并不是数据库,而是IDBOpenDBRequest对象。

关于indexedDB.open方法更为详细介绍参阅IndexedDB.open()打开与新建数据库一章节。

二.添加对象仓库:

在关系型数据库中,创建数据库后,如果要存储数据,那么首先要创建一个表,然后再添加行。

但是IndexedDB数据库并没有表的概念,替代表的是objectStore对象仓库,可以认为它是indexedDB中的表。

通过createObjectStore方法可以创建对象仓库,此方法属于IDBDatabase数据库对象。

语法结构:

[JavaScript] 纯文本查看 复制代码
let objectStore = db.createObjectStore("person",{ keyPath: 'id' });

参数解析如下:

(1).db:IDBDatabase数据库对象,也就是创建或者打开的数据库。

(2).person:创建对象仓库的名称,一个字符串。

(3).{ keyPath: 'id' }:一个配置对象,设置对象仓库存储数据的主键为id。

代码实例片段如下:

[JavaScript] 纯文本查看 复制代码
let request = window.indexedDB.open("antzone", 1);
request.onsuccess = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('person')) {
    let objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  let objectStore = db.createObjectStore("person",{ keyPath: 'id' });
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/220246lhxebd2jyyu8y28r.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).首先通过indexedDB.open方法创建或者打开数据库"antzone"。

(2).indexedDB.open方法是一个异步操作,返回的是一个IDBOpenDBRequest对象。

(3).IDBOpenDBRequest对象upgradeneeded或success事件可以监听数据库升级(包括创建)或打开是否成功。

(4).如果新创建数据库,那么会触发upgradeneeded事件,然后再触发success事件。

(5).如果数据库已经存在,且不涉及版本更新,那么只触发success事件。

(6).当然如果出错,则会触发error事件。

(7).假设上述代码是新建数据库,那么会首先触发upgradeneeded事件并创建对应对象仓库,然后再触发success事件,这时候需要判断一下对应的对象仓库是否存在,如果存在则不再去创建,否则会报错。

更多关于创建对象仓库内容可以参阅indexedDB createObjectStore()创建对象仓库一章节。

三.数据操作:

数据库的数据操作无非是增删改查,数据存储在对象仓库中。

通过对象仓库的如下对应方法可以实现相应的数据操作:

(1).添加数据具体参阅IDBObjectStore.add() 方法一章节。

(2).读取数据具体参阅IDBObjectStore.get() 方法一章节。

(3).遍历数据具体参阅IndexedDB数据库遍历数据一章节。

(4).更新数据具体参阅IDBObjectStore.put() 方法一章节。

(5).删除数据具体参阅IDBObjectStore.delete() 方法一章节。

IndexedDB数据库相关知识内容比较多,上述文章简略介绍了IndexedDB数据的基本操作。

为便于操作,HTML5将数据库涉及到的实体抽象成不同的对象接口,参阅IndexedDB 数据库对象接口概述一文。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部