Johnny_Z

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

本篇文章主要讲解HTML5的本地存储,使用到的技术是indexedDB。

对于本地存储这个概念想必大家都已经有所了解了,就是把一些数据存储到浏览器中,当与网络断开时,可以从浏览器中读取数据,用来做一些离线应用。

IndexedDB的技术特点是,不需要你去写特定的sql语句来对数据进行操作,它是nosql的,数据形式使用的是json。

下面讲解一个例子,以这个例子来说明一些关键的代码。

这个简单的例子是能增加一个人的信息,并且能删除之。先附上一个效果图:

1

添加删除信息时配合firebug信息的效果:

2

示例还是蛮简单的,下面我们来分析一下使用indexedDB的一般步骤,这里只着重讲解一些回调函数和对象,剩下的工作还需要读者自行分析,最后会给出完整的源代码示例。

我们首先需要根据不同浏览器的内核,创建indexedDB对象,如下:

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

之后,我们需要打开一个数据库,我这里起名叫做persons:

openRequest = indexedDB.open("persons");

这里还需要说明一下,open方法是异步方法,我们在这里需要处理它的回调函数即可。例如:

openRequest.onsuccess = function(e)
{
……
}
openRequest.onerror = function (event)
{
……
}
openRequest.onupgradeneeded = function(e)
{
……
}

我们可以看到,我们需要对成功和错误的回调函数进行处理。onupgradeneeded这个回调函数又是做什么的呢?当数据库发生改变时,我们需要处理这个回调函数。比如说,当某个数据库不存在需要创建,或者数据库更改时。我们一般需要在该回调函数内创建objectStore,它就相当于数据库中的某个表一样。

当我们需要对表中的数据进行遍历时,我们可能需要用到下述代码:

var transaction = db.transaction(["person"],"readwrite");
var objectStore = transaction.objectStore("person");
objectStore.openCursor().onsuccess = function(event)
{
var cursor = event.target.result;
if (cursor)
{
……
}
}
objectStore.openCursor().onerror = function(event)
{
……
}

凡是对数据的读写操作,一般都会用到transacation,它也是异步的。例如,当我们需要读取数据时,有个游标对象,我们操作它就可以很方便的读取数据了。

其他的一些接口就不在这里一一介绍了,感兴趣的朋友可以查看以下网址:

https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB

这个是mozilla官方提供的API。

下面还要说重要的一点,就是运行环境。

1.页面必须依托于服务器才能正常显示,单独打开页面是无法正常显示的,请把页面发布到服务器中,如IIS、Tomcat、或者调试环境自带的轻量级服务器等。

2.笔者在firefox14及以上版本运行代码无误;IE9及更早版本并不支持,据说IE10正式版支持,但是这点笔者并没有实际测试过;opera(当前版本12)目前尚不支持;chrome(当前版本24)支持indexedDB部分功能,但是本例中代码并不能正常运行,据说因为不支持onupgradeneeded这个回调函数,也许chrome有自己的实现策略,这就需要读者自己查找资料了。

下面给出源代码:

点我下载

请注明本文原始链接:http://www.cnblogs.com/Johnny_Z/archive/2012/11/04/2753331.html

posted on 2012-11-04 10:25  Johnny_Z  阅读(9864)  评论(0编辑  收藏  举报