随着firefox4正式版的推出,IndexedDB正式进入我们的视线。IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库。相较之下,WebDataBase标准已经很长时间没有更新,大有被IndexedDB取代的意思。
Section 1:起步,得到Database引用
w3c为IndexedDB定义了很多接口,其中Database对象被定义为IDBDataBase。而得到IDBDataBase用的是工厂方法,即从IDBFactory中取得。浏览器对象中,实现了IDBFactory的只有indexedDB这个实例。
大家可以先看下IDBFactory和IDBDataBase接口的定义
interface IDBFactory {
IDBRequest open (in DOMString name);
IDBRequest deleteDatabase (in DOMString name);
};
interface IDBDatabase : EventTarget {
readonly attribute DOMString name;
readonly attribute DOMString version;
readonly attribute DOMStringList objectStoreNames;
IDBObjectStore createObjectStore (in DOMString name, in optional Object optionalParameters) raises (IDBDatabaseException);
IDBRequest deleteObjectStore (in DOMString name) raises (IDBDatabaseException);
IDBVersionChangeRequest setVersion ([TreatNullAs=EmptyString] in DOMString version);
IDBTransaction transaction (in any storeNames, in optional unsigned short mode) raises (IDBDatabaseException);
void close ();
attribute Function onabort;
attribute Function onerror;
attribute Function onversionchange;
};
interface IDBRequest : EventTarget {
readonly attribute any result get raises (IDBDatabaseException);
readonly attribute unsigned short errorCode get raises (IDBDatabaseException);
readonly attribute Object source;
readonly attribute IDBTransaction transaction;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
attribute Function onsuccess;
attribute Function onerror;
};
重要:IndexedDB中,几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录,返回一个request,在request的result中得到查询结果。又比如打开数据库,返回一个request,在request的result中得到返回的数据库引用。
从IDBFactory的方法体定义中可以看到,返回了一个IDBRequest对象。这个IDBRequest就是刚才所说的request。
下面给出一个通用的得到IDBDataBase的方法
if (!window.indexedDB) {
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}
var request = indexedDB.open("MyTestDatabase");
request.onsuccess = function(e) {
// Obtain IDBDatabase
// VERSION_CHANGE transaction callback
var db = request.result;
}
Firefox4中使用IndexedDB的注意点:
1.indexedDB这个实例并不叫indexedDB,而是叫mozIndexedDB
2.indexedDB无法在iframe或者frame标签中使用
3.Firefox4中并未实现deleteDatabase方法(可能会在新版本中改进)
4.indexedDB.open并不能简单的看成是打开数据库,而是在打开数据库的基础上启动了一个version_change事件方法回调。在这个回调方法里自动启动了一个事务,用于version_change。IDBDatabase对象必须要在这个事务中才能取得。
Section 2:初始化object store
indexedDB标准建议,在初始化的时候创建表。以后每次打开浏览器,只需要check版本号。不需要第二次创建。而表在indexedDB中被称为object store。
下面给出object store接口的定义:
interface IDBObjectStore {
readonly attribute DOMString name;
readonly attribute DOMString keyPath;
readonly attribute DOMStringList indexNames;
readonly attribute IDBTransaction transaction;
IDBRequest put (in any value, in optional any key) raises (IDBDatabaseException, DOMException);
IDBRequest add (in any value, in optional any key) raises (IDBDatabaseException, DOMException);
IDBRequest delete (in any key) raises (IDBDatabaseException);
IDBRequest get (in any key) raises (IDBDatabaseException);
IDBRequest clear () raises (IDBDatabaseException);
IDBRequest openCursor (in optional any range, in optional unsigned short direction) raises (IDBDatabaseException);
IDBIndex createIndex (in DOMString name, in DOMString keyPath, in optional Object optionalParameters) raises (IDBDatabaseException);
IDBIndex index (in DOMString name) raises (IDBDatabaseException);
void deleteIndex (in DOMString indexName) raises (IDBDatabaseException);
};
大家可以看到IDBDatabase中有一个createObjectStore方法。但是取得IDBDatabase后直接调用会报Exception。原因在于createObjectStore不能在version_change 的transaction callback中被调用。
下面给出通用的创建object store的代码
var db = null;
var customerData = [
{ssn: "444-44-4444", name: "Bill", age: 25, email: "bill@company.com", nickName: ["1", "2", "3"]},
{ssn: "555-55-5555", name: "Donna", age: 34, email: "donna@home.org"},
{ssn: "666-66-6666", name: "Jack", age: 14, email: "jack@sina.com.cn"}
];
request.onsuccess = function(e) {
// Obtain IDBDatabase
// VERSION_CHANGE transaction callback
db = request.result;
if (db.version != "1.0") {
var requestVersion = db.setVersion("1.0");
requestVersion.onerror = function(event) {
alert(event);
}
requestVersion.onsuccess = function(event) {
createObjectStore(db);
}
}
db.close();
};
function createObjectStore(db) {
if (db.objectStoreNames.contains('customers')) {
db.deleteObjectStore("customers")
}
// Create Object Store
// This method was not called from a VERSION_CHANGE transaction callback.
var objectStore = db.createObjectStore("customers", {
// primary key
keyPath: "ssn",
// auto increment
autoIncrement: false
});
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
// Add initial data
for (var index = 0; index < customerData.length; index++) {
objectStore.add(customerData[index]);
}
}
以上代码创建了一个名为customers,PrimaryKey为ssn,并且不带自增序列的object store(表)。并为这个object store创建了两个索引(name和email).其中email是唯一键。并且为customers创建了初始数据。可以看到初始数据中可以嵌套多层结构。
Section 3:事务和游标
通过上面IDBDatabase接口的定义,我们可以从IDBDatabase中取得transaction。在indexedDB中,事务会自动提交或回滚。所以无需手动commit或者rollback。
事务分为三种
IDBTransaction.READ_ONLY 只读
IDBTransaction.READ_WRITE 可读可写
IDBTransaction.VERSION_CHANGE 版本升级
我们用的最多的是前两种。如果不设置事务级别,则默认为READ_ONLY。
游标是遍历object store的唯一方法。虽然firefox4中有getAll,但是相信在不久的将来,这个方法会被取缔。
如果在打开游标的时候不设置,默认采用IDBCursor.NEXT
下面给出得到事务对象的通用方法
// 通过IDBDatabase得到IDBTransaction
var transaction = db.transaction(["customers"]);
// 通过IDBTransaction得到IDBObjectStore
var objectStore = transaction.objectStore("customers");
// 打开游标,遍历customers中所有数据
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
var key = cursor.key;
var rowData = cursor.value;
alert(rowData.name);
cursor.continue();
}
}
上面代码中使用了游标,这里要注意,在调用了cursor.continue之后,cursor会重新调用onsuccess句柄上的方法。所以,以上代码的onsuccess实际上被调用了3遍。至于openCursor的使用方法,下个Section中会有提到
Section 4:索引查询
section3中的objectStore.openCursor是根据keyPath去查询的。如果想通过某个索引去查询,可以用objectStore.index(索引名).openCursor去查询
1)openCursor的第一个参数为查询条件,他需要传入一个IDBKeyRange对象。
IDBKeyRange的创建方式有4种,都是调用了IDBKeyRange的静态方法。分别代表了4种不同类型的条件。
// 只取得当前索引的值为Bill的数据
IDBKeyRange.only("Bill");
// 只取得当前索引的值大于Bill,并且不包括Bill的数据
IDBKeyRange.lowerBound("Bill", true);
// 只取得当前索引的值小于Bill,并且包括Bill的数据
IDBKeyRange.upperBound("Bill", false);
// 取得当前索引的值介于Bill和Jack之间,并且包括Bill,但不包括Jack的数据
IDBKeyRange.bound("Bill", "Jack", false, true);
2)openCursor的第二个参数为游标方向。有4种
IDBCursor.NEXT 顺序循环
IDBCursor.NEXT_NO_DUPLICATE 顺序循环不重复
IDBCursor.PREV 倒序循环
IDBCursor.PREV_NO_DUPLICATE 倒序循环不重复
例子:
var boundKeyRange = IDBKeyRange.upperBound("Jack", false);
objectStore.index("name").openCursor(boundKeyRange, IDBCursor.PREV_NO_DUPLICATE).onsuccess = function(event) {
var cursor = event.target.result;
if (!cursor) {
return;
}
var rowData = cursor.value;
alert(rowData.name);
cursor.continue();
};
完整实例请参考附件。注意,indexedDB必须要在发布环境(web容器)中才可以运行。
分享到:
相关推荐
IndexedDB 基本使用
一个本地数据库(Web SQL IndexedDB)实现的通信录;介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 等等。
但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库,webSQL基本上已经废弃了,具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型...
前段时间项目需要本地存储聊天数据,使用到indexedDB,经查阅大量文章,终于完成。感觉网上indexedDB的文章不够多,也不够完善,因此把代码分享出来,帮助需要的小伙伴。
本篇文章主要介绍了HTML5中indexedDB 数据库的使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
IndexedDB介绍 IndexedDB是一种能在浏览器中持久的存储结构化数据的对象数据库,并且为web应用提供了丰富的查询能力。 相比于Web SQL数据库它更加简单,而且官方标准中关于Web SQL的工作已经停止。 相比于Web ...
html5 indexeddb 存储
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/2178433
所以研究了一下HTML5的IndexedDB。 对于只存储某些字段的需求来说,可以使用Local Storage和 Session Storage来完成。但是一旦存储大量的数据,Local Storage和 Session Storage就远远不能满足需求了。这时,Indexed...
indexedDB.html
indexeddb-promiseIndexedDB的所有操作都是异步的,API都是在回调函数中执行的,为了便于对其进行操作,使用ES6中的Promise来封装。1. 安装npm包// use npmnpm install --save-dev indexeddb-promise// use yarnyarn...
解压即用。解压即用。解压即用。解压即用。解压即用。解压即用。解压即用。
非常简单的indexedDB例子,自己按照书上面写的, 用的是 visual studio 2012 做的 mvc3 程序。
indexedDB跨平台框架 博文链接:https://appstores.iteye.com/blog/1950529
下面小编就为大家带来一篇html5 初试 indexedDB(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
一个超级简单小型的,基于promise采用IndexedDB的健值存储
IndexedDB详细
lovefield 是建立在 IndexedDB 上的关系查询引擎。它提供了类似 SQL 的语法,并且可以跨浏览器工作(目前支持 Chrome 37 及以上版本,Firefox 31 及以上版本,IE 10 及以上版本)。示例代码:<!doctype html> <...
学习使用indexedDB,封装js进行本地浏览器的存储功能。
IndexedDB基本使用共22页.pdf.zip