今天做一個IndexedDB(以下簡稱IDB)的demo，運行環境是Firefox 10。

DEMO演示鏈接 ?(firefox 10+ only)

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

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

首先是html代碼：

    _body onload="
    
      init()
    
    ">

    _button onclick="
    
      clickAddBtn()
    
    ">Add_/button>

    _ul 
    
      id="list"
    
    >_/ul>

_/body>
  

為了演示方便，我們引入jQuery作界面處理，再聲明一個全局變量 db ，作為數據庫連接的句柄；再聲明一個全局變量 list ，作為網頁中列表元素的jQuery句柄。

    var db;

var list = $('#list');
  

然后定義數據庫初始化的行數 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: 版本不同時創建一個新的object store

    };

}
  

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

    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'});
    
    

    };

}
  

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

    function add(
    
      title, url
    
    ) {

    var 
    
      link
    
     = {

        title: title,

        url: url

    }; // 創建要存儲的對象

    var transaction = db.transaction('links', IDBTransaction.READ_WRITE);

    var store = transaction.objectStore('links');

    
    
      var req = store.put(link);
    
     // put的作用是key存在時做更新處理，不存在是做添加處理

    
    
      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);
    
     // 創建關鍵字范圍描述

    
    
      var req = store.openCursor(range);
    
     // 創建在上述范圍內遍歷的游標

    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 是用來遍歷列表的，前者確定遍歷的范圍，后者根據前者的范圍逐條觸發 onsuccess 事件，這里定義的遍歷范圍是大于0，即所有非空的url，其實所有js類型的值都是可以在一起比大小的，如果想測試 比較任意兩個key的大小 ，可以運行函數 window.mozIndexedDB.cmp(any first, any second) 。

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

    function showList() {

    
    
      list.empty();
    
    



    var transaction = db.transaction('links');

    var store = transaction.objectStore('links');

    var range = IDBKeyRange.lowerBound(0); // 創建關鍵字范圍描述

    var req = store.openCursor(range); // 創建在上述范圍內遍歷的游標

    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的注意事項，并提供兼容問題的解決辦法。

IndexedDB技術簡介(三)