HTML5中indexedDB 数据库的使用实例

前言

在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。从上篇：HTML5 进阶系列：web Storage ，我们知道 web Storage 可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。

连接数据库

一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库。

var request = indexedDB.open('dbName', 1); // 打开 dbName 数据库
request.onerror = function(e){ // 监听连接数据库失败时执行
console.log('连接数据库失败');
}
request.onsuccess = function(e){ // 监听连接数据库成功时执行
console.log('连接数据库成功');
}

我们使用 indexedDB.open 方法来连接数据库，该方法接收两个参数，第一个是数据库名，第二个是数据库版本号。该方法会返回一个 IDBOpenDBRequest 对象，代表一个请求连接数据库的请求对象。我们可以通过监听请求对象的 onsuccess 和 onerror 事件来定义连接成功或失败需执行的方法。

因为 indexedDB API 中不允许数据库中的数据仓库在同一版本中发生变化，所以需要在 indexedDB.open 方法中传入新的版本号来更新版本，避免在同一版本中重复修改数据库。版本号必须为整数！

var request = indexedDB.open('dbName', 2); // 更新版本，打开版本为2的数据库
// ...
request.onupgradeneeded = function(e){
console.log('新数据库版本号为=' + e.newVersion);
}

我们通过监听请求对象的 onupgradeneeded 事件来定义数据库版本更新时执行的方法。

关闭数据库

使用 indexedDB.open 连接数据库成功后会返回一个 IDBOpenDBRequest 对象，我们可以调用该对象的 close 方法来关闭数据库。

var request = indexedDB.open('dbName', 2);
// ...
request.onsuccess = function(e){
console.log('连接数据库成功');
var db = e.target.result;
db.close();
console.log('数据库已关闭');
}

删除数据库

indexedDB.deleteDatabase('dbName');
console.log('数据库已删除');

创建对象仓库

object store（对象仓库）是 indexedDB 数据库的基础，在indexedDB 中并没有数据库表，而对象仓库，就是相当于一个数据库表。

var request = indexedDB.open('dbName', 3);
// ...
request.onupgradeneeded = function(e){
var db = e.target.result;								 
 1/4    1 2 3 4 下一页 尾页