基于Firefox 10的IndexedDB实例演示

今天做一个IndexedDB(以下简称IDB)的demo，运行环境是Firefox 10。

DEMO演示链接 (firefox 10+ only)

我们做一个阅读列表的页面，可以让用户把任意网址存入这个阅读列表中，并为每一个网址起一个名字，也可以随时删除，且列表可以按网址自动去重。

正如上一篇文章介绍的步骤，我们先初始化数据库，然后建表，然后把添加/删除/读取网址的事件和数据库操作绑定在一起。

首先是html代码：

_bodyonload="init()">_buttononclick="clickAddBtn()">Add_/button>_ulid="list">_/ul>_/body>

为了演示方便，我们引入jQuery作界面处理，再声明一个全局变量db，作为数据库连接的句柄;再声明一个全局变量list，作为网页中列表元素的jQuery句柄。

vardb; varlist=$('#list');

然后定义数据库初始化的行数init

functioninit(){ varreq=window.mozIndexedDB.open('readinglist','1.0'); req.onsuccess=function(e){ db=this.result; //TODO:连接成功后展示列表 }; req.onupgradeneeded=function(e){ db=this.result; //TODO:版本不同时创建一个新的objectstore }; }

这段代码的作用是初始化数据库(readinglist)连接，并在第一次连接数据库时创建表(links)。我们把展示列表的函数定义为showList()，把创建表的代码也补充完整，即：

functioninit(){ varreq=window.mozIndexedDB.open('readinglist','1.0'); req.onsuccess=function(e){ db=this.result; showList(); }; req.onupgradeneeded=function(e){ db=this.result; db.createObjectStore('links',{keyPath:'url'}); }; }

然后我们定义添加/删除/展示链接的函数：add(title, url)/remove(url)/showList()

functionadd(title,url){ varlink={ title:title, url:url };//创建要存储的对象 vartransaction=db.transaction('links',IDBTransaction.READ_WRITE); varstore=transaction.objectStore('links'); varreq=store.put(link);//put的作用是key存在时做更新处理，不存在是做添加处理 req.onsuccess=showList;//添加成功后重新展示列表 } functionremove(url){ vartransaction=db.transaction('links',IDBTransaction.READ_WRITE); varstore=transaction.objectStore('links'); varreq=store.delete(url);//删除此链接 req.onsuccess=showList;//删除成功后重新展示列表 } functionshowList(){ //TODO:clearelement:#list vartransaction=db.transaction('links'); varstore=transaction.objectStore('links'); varrange=IDBKeyRange.lowerBound(0);//创建关键字范围描述 varreq=store.openCursor(range);//创建在上述范围内遍历的游标 req.onsuccess=function(e){ varresult=this.result; if(result){ varlink=result.value; //TODO:appendthislinktoelement:#list result.continue(); } }; }

注意这里的IDBKeyRange和store.openCursor是用来遍历列表的，前者确定遍历的范围，后者根据前者的范围逐条触发onsuccess事件，这里定义的遍历范围是大于0，即所有非空的url，其实所有js类型的值都是可以在一起比大小的，如果想测试比较任意两个key的大小，可以运行函数window.mozIndexedDB.cmp(any first, any second)。

最后，我们把最后两个TODO的部分补充完整，再把界面上的事件绑定好。编码工作就完成了。

functionshowList(){ list.empty(); vartransaction=db.transaction('links'); varstore=transaction.objectStore('links'); varrange=IDBKeyRange.lowerBound(0);//创建关键字范围描述 varreq=store.openCursor(range);//创建在上述范围内遍历的游标 req.onsuccess=function(e){ varresult=this.result; if(result){ varlink=result.value; appendLink(link); result.continue(); } }; } functionappendLink(link){ varurl=link.url; vartitle=link.title; varli=$('_li>_ahref="#"target="_blank">_/a>_button>X_/button>_/li>'); li.find('a').attr('title',title).attr('href',url).text(title); li.find('button').click(function(e){ remove(link.url); }); list.append(li); } functionclickAddBtn(e){ vartitle=prompt('pleaseinputthetitle')||'[Notitle]'; varurl=prompt('pleaseinputtheurl','http://'); if(title&&url){ add(title,url); } }

DEMO演示链接 (firefox 10+ only)

下一篇讨论webkit下使用IDB的注意事项，并提供兼容问题的解决办法。

【系列文章】

IndexedDB的JS接口设计详解浅析IndexedDB存数结构调试IndexedDB应用程序

原文：http://bulaoge.net/topic.blg?dmn=g3g4&tid=2335030#Content