今天做一個(gè)IndexedDB(以下簡稱IDB)的demo，運(yùn)行環(huán)境是Firefox 10。

DEMO演示鏈接 (firefox 10+ only)

我們做一個(gè)閱讀列表的頁面，可以讓用戶把任意網(wǎng)址存入這個(gè)閱讀列表中，并為每一個(gè)網(wǎng)址起一個(gè)名字，也可以隨時(shí)刪除，且列表可以按網(wǎng)址自動(dòng)去重。

正如上一篇文章介紹的步驟，我們先初始化數(shù)據(jù)庫，然后建表，然后把添加/刪除/讀取網(wǎng)址的事件和數(shù)據(jù)庫操作綁定在一起。

首先是html代碼：

_body onload="init()"> 
    _button onclick="clickAddBtn()">Add_/button> 
    _ul id="list">_/ul> 
_/body> 

為了演示方便，我們引入jQuery作界面處理，再聲明一個(gè)全局變量db，作為數(shù)據(jù)庫連接的句柄;再聲明一個(gè)全局變量list，作為網(wǎng)頁中列表元素的jQuery句柄。

var db;  
var list = $('#list'); 

然后定義數(shù)據(jù)庫初始化的行數(shù)init

function init() {  
    var req = window.mozIndexedDB.open('readinglist', '1.0');  
    req.onsuccess = function (e) {  
        db = this.result;  
        // TODO: 連接成功后展示列表  
    };  
    req.onupgradeneeded = function (e) {  
        db = this.result;  
        // TODO: 版本不同時(shí)創(chuàng)建一個(gè)新的object store  
    };  
} 

這段代碼的作用是初始化數(shù)據(jù)庫(readinglist)連接，并在第一次連接數(shù)據(jù)庫時(shí)創(chuàng)建表(links)。我們把展示列表的函數(shù)定義為showList()，把創(chuàng)建表的代碼也補(bǔ)充完整，即：

function init() {  
    var req = 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'});  
    };  
} 

然后我們定義添加/刪除/展示鏈接的函數(shù)：add(title, url)/remove(url)/showList()

function add(title, url) {  
    var link = {  
        title: title,  
        url: url  
    }; // 創(chuàng)建要存儲(chǔ)的對(duì)象  
    var transaction = db.transaction('links', IDBTransaction.READ_WRITE);  
    var store = transaction.objectStore('links');  
    var req = store.put(link); // put的作用是key存在時(shí)做更新處理，不存在是做添加處理  
    req.onsuccess = showList; // 添加成功后重新展示列表  
}  
 
function remove(url) {  
    var transaction = db.transaction('links', IDBTransaction.READ_WRITE);  
    var store = transaction.objectStore('links');  
    var req = store.delete(url); // 刪除此鏈接  
    req.onsuccess = showList; // 刪除成功后重新展示列表  
}  
 
function showList() {  
    // TODO: clear element: #list  
 
    var transaction = db.transaction('links');  
    var store = transaction.objectStore('links');  
    var range = IDBKeyRange.lowerBound(0); // 創(chuàng)建關(guān)鍵字范圍描述  
    var req = store.openCursor(range); // 創(chuàng)建在上述范圍內(nèi)遍歷的游標(biāo)  
    req.onsuccess = function (e) {  
        var result = this.result;  
        if (result) {  
            var link = result.value;  
            // TODO: append this link to element: #list  
            result.continue();  
        }  
    };  
} 

注意這里的IDBKeyRange和store.openCursor是用來遍歷列表的，前者確定遍歷的范圍，后者根據(jù)前者的范圍逐條觸發(fā)onsuccess事件，這里定義的遍歷范圍是大于0，即所有非空的url，其實(shí)所有js類型的值都是可以在一起比大小的，如果想測試比較任意兩個(gè)key的大小，可以運(yùn)行函數(shù)window.mozIndexedDB.cmp(any first, any second)。

最后，我們把最后兩個(gè)TODO的部分補(bǔ)充完整，再把界面上的事件綁定好。編碼工作就完成了。

function showList() {  
    list.empty();  
 
    var transaction = db.transaction('links');  
    var store = transaction.objectStore('links');  
    var range = IDBKeyRange.lowerBound(0); // 創(chuàng)建關(guān)鍵字范圍描述  
    var req = store.openCursor(range); // 創(chuàng)建在上述范圍內(nèi)遍歷的游標(biāo)  
    req.onsuccess = function (e) {  
        var result = this.result;  
        if (result) {  
            var link = result.value;  
            appendLink(link);  
            result.continue();  
        }  
    };  
}  
 
function appendLink(link) {  
    var url = link.url;  
    var title = link.title;  
    var li = $('_li>_a href="#" 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);  
}  
 
function clickAddBtn(e) {  
    var title = prompt('please input the title') || '[No title]';  
    var url = prompt('please input the url', 'http://');  
    if (title && url) {  
        add(title, url);  
    }  
} 

DEMO演示鏈接 (firefox 10+ only)

下一篇討論webkit下使用IDB的注意事項(xiàng)，并提供兼容問題的解決辦法。

【系列文章】

1. IndexedDB的JS接口設(shè)計(jì)詳解
2. 淺析IndexedDB存數(shù)結(jié)構(gòu)
3. 調(diào)試IndexedDB應(yīng)用程序

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