1、打开数据库

使用 IndexedDB 的第一步是打开数据库,使用indexedDB.open()方法

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

这个方法接受两个参数,第一个参数是字符串,表示数据库的名字。如果指定的数据库不存在,就会新建数据库。第二个参数是整数,表示数据库的版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件errorsuccessupgradeneeded,处理打开数据库的操作结果。

2 新建数据库、对象仓库

新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。

通常,新建数据库以后,第一件事是新建对象仓库(即新建表)。

request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
}

上面代码中,数据库新建成功以后,新增一张叫做person的表格,主键是id

更好的写法是先判断一下,这张表格是否存在,如果不存在再新建。

request.onupgradeneeded = function (event) {
db = event.target.result;
var objectStore;
if (!db.objectStoreNames.contains('person')) {
objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
}

主键(key)是默认建立索引的属性。比如,数据记录是{ id: 1, name: '张三' },那么id属性可以作为主键。主键也可以指定为下一层对象的属性,比如{ foo: { bar: 'baz' } }foo.bar也可以指定为主键。

如果数据记录里面没有合适作为主键的属性,那么可以让 IndexedDB 自动生成主键。

var objectStore = db.createObjectStore(
'person',
{ autoIncrement: true }
);

上面代码中,指定主键为一个递增的整数。

3、 新增索引

新建对象仓库以后,下一步可以新建索引。

request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
}

上面代码中,IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象(说明该属性是否包含重复的值)。

4、 新增数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

function add() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); request.onsuccess = function (event) {
console.log('数据写入成功');
}; request.onerror = function (event) {
console.log('数据写入失败');
}
} add();

上面代码中,写入数据需要新建一个事务。新建时必须指定表格名称和操作模式("只读"或"读写")。新建事务以后,通过IDBTransaction.objectStore(name)方法,拿到 IDBObjectStore 对象,再通过表格对象的add()方法,向表格写入一条记录。

写入操作是一个异步操作,通过监听连接对象的success事件和error事件,了解是否写入成功。

5、 读取数据

读取数据也是通过事务完成。

function read() {
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1); request.onerror = function(event) {
console.log('事务失败');
}; request.onsuccess = function( event) {
if (request.result) {
console.log('Name: ' + request.result.name);
console.log('Age: ' + request.result.age);
console.log('Email: ' + request.result.email);
} else {
console.log('未获得数据记录');
}
};
} read();

上面代码中,objectStore.get()方法用于读取数据,参数是主键的值

6、 遍历数据

遍历数据表格的所有记录,要使用指针对象 IDBCursor。

function readAll() {
var objectStore = db.transaction('person').objectStore('person'); objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result; if (cursor) {
console.log('Id: ' + cursor.key);
console.log('Name: ' + cursor.value.name);
console.log('Age: ' + cursor.value.age);
console.log('Email: ' + cursor.value.email);
cursor.continue();
} else {
console.log('没有更多数据了!');
}
};
} readAll();

上面代码中,新建指针对象的openCursor()方法是一个异步操作,所以要监听success事件。

7、 更新数据

更新数据要使用IDBObject.put()方法。

function update() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); request.onsuccess = function (event) {
console.log('数据更新成功');
}; request.onerror = function (event) {
console.log('数据更新失败');
}
} update();

上面代码中,put()方法自动更新了主键为1的记录。

8、 删除数据

IDBObjectStore.delete()方法用于删除记录。

function remove() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1); request.onsuccess = function (event) {
console.log('数据删除成功');
};
} remove();

9、 使用索引

索引的意义在于,可以让你搜索任意字段,也就是说从任意字段拿到数据记录。如果不建立索引,默认只能搜索主键(即从主键取值)。

假定新建表格的时候,对name字段建立了索引。

objectStore.createIndex('name', 'name', { unique: false });

现在,就可以从name找到对应的数据记录了。

var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四'); request.onsuccess = function (e) {
var result = e.target.result;
if (result) {
// ...
} else {
// ...
}
}

(完)

indexedDB数据库完整创建流程的更多相关文章

  1. Magento代码之订单创建流程

    Magento代码之订单创建流程         直接看代码吧.下面的代码是如何通过程序创建一个完美订单.        <?php        require_once 'app/Mage. ...

  2. ADF 项目创建流程

    ADF 项目创建流程: 1.首先建好应用 2.创建model,UI 3.创建EO,VO,AO, VL 4.设置EO的属性 5.新建lov 6.设置VO的View Accessors,并设置Attrib ...

  3. MFC中SDI程序创建流程的回顾

    SDI程序创建流程的回顾 从CWinApp.InitialInstance()开始, 1.首先应用程序对象创建文档模板; CSingleDocTemplate* pDocTemplate; pDocT ...

  4. 【Java基础】Java类的加载和对象创建流程的详细分析

    相信我们在面试Java的时候总会有一些公司要做笔试题目的,而Java类的加载和对象创建流程的知识点也是常见的题目之一.接下来通过实例详细的分析一下. 实例问题 实例代码 Parent类 package ...

  5. Java类的加载和对象创建流程的详细分析

    相信我们在面试Java的时候总会有一些公司要做笔试题目的,而Java类的加载和对象创建流程的知识点也是常见的题目之一.接下来通过实例详细的分析一下: package com.test; public ...

  6. OpenStack Nova虚拟机创建流程解析

    https://yikun.github.io/2017/09/27/OpenStack-Nova%E8%99%9A%E6%8B%9F%E6%9C%BA%E5%88%9B%E5%BB%BA%E6%B5 ...

  7. 8 云计算系列之Horizon的安装与虚拟机创建流程

    preface 在上一章节中,我们可以在无web管理界面上创建并启动虚拟机,虽然可以这么做,但是敲命令太繁琐,所以此时我们可以安装openstack web管理界面,通过web界面的图形化操作open ...

  8. k8s 基础 pod创建流程

    Pod是Kubernetes中最基本的部署调度单元,可以包含container,逻辑上表示某种应用的一个实例.例如一个web站点应用由前端.后端及数据库构建而成,这三个组件将运行在各自的容器中,那么我 ...

  9. solr索引创建流程

    solr索引创建流程: 分词组件Tokenizer 分词组件(Tokenizer)会做以下几件事情(这个过程称为:Tokenize),处理得到的结果是词汇单元(Token). 1.将文档分成一个一个单 ...

随机推荐

  1. PAT甲级:1136 A Delayed Palindrome (20分)

    PAT甲级:1136 A Delayed Palindrome (20分) 题干 Look-and-say sequence is a sequence of integers as the foll ...

  2. [考试总结]noip模拟20

    第五场,再挂分就没了.. 然后就没了.. 考场上一直想方法. 似乎想到了 \(T1\) 正解. 然而几个 \(k\) 的调试信息都让我迷失了自我. 然后有几句啥都没用的语句加在了上面.. 挂分... ...

  3. videojs文档翻译Guides-components

    components Components Video.js播放器的架构围绕组件. Player类和所有表示播放器控件和其他UI元素的类都继承自Component类. 这种架构使得可以轻松地以反映DO ...

  4. 过渡——transition

    ① 设置参与过渡的属性 transition-property:  ;      all / transform / 参与过渡的属性 ② 设置过渡的时长 transition-duration:  s ...

  5. 【问题记录】- 谷歌浏览器 Html生成PDF

    起因: 由于项目需要实现将网页静默打印效果,那么直接使用浏览器打印功能无法达到静默打印效果. 浏览器打印都会弹出预览界面(如下图),无法达到静默打印. 解决方案: 谷歌浏览器提供了将html直接打印成 ...

  6. Prometheus MySQL监控+grafana展示

    前言 最近爱上了研究各种杂七杂八的技术. Prometheus是现如今最火的监控软件之一.做为一个运维DBA,不会这个可就OUT了. 本篇博客,演示一下prometheus之通过mysql expor ...

  7. .user.ini和.htaccess

    .user.ini .user.ini的使用条件 (1)nginx/apache/IIS,只要是以fastcgi运行的php都可以用这个方法 php配置访问级别 不同的php配置项根据其访问级别具有不 ...

  8. Vue-Promise

    promise 就是一种异步编程的的解决方案 当执行网络请求的时候,代码就会出现阻塞,下面的代码要等待请求完成了在运行,所以我们一般网络请求的时候就去开启一个异步任务,一边请求一边执行其他代码 请求到 ...

  9. 关于表单重复提交之验证码 和谷歌Kaptcha图片验证码的使用

    表单重复提交之-----验证码 表单重复提交有三种常见的情况: 一:提交完表单.服务器使用请求转来进行页面跳转.这个时候,用户按下功能键 F5,就会发起最后一次的请求. 造成表单重复提交问题.解决方法 ...

  10. linux联网、远程

    使用VMware虚拟机创建linux系统CentOS 7,连接网络以及远程Moba工具. 一.首先安装好VMware虚拟机和CentOS系统,网上很多教程,不在赘述. 二.打开VMware进行配置 1 ...