HTML5 Indexed Database API 入門(10) - 走訪資料

HTML5 Indexed Database API 入門系列

有幾種不同模式的資料檢視方式,其中最單純的便是巡覽物件倉儲中的所有資料內容,Cursor 物件提供相關功能的實作,要取得此物件必須調用 IDBObjectStore 物件的 openCursor() 方法,以下為此方法的定義:

IDBRequest openCursor (
optional any? range,
optional DOMString direction)

調用此方法成功之後,會觸發 success 事件並且建立實作 IDBCursorWithValue 的 cursor 物件,於 success 事件處理器中,可以透過事件參數取得此物件,其介面定義如下:

interface IDBCursorWithValue : IDBCursor {
    readonly attribute any value;
};

value 屬性成員表示目前記錄的值,也就是儲存的資料,可能是特定型態的簡單資料,或是複雜物件,如果要取出此資料的對應鍵值,可以透過 IDBCursor 介面的 key 取得,以下是 IDBCursor 介面的定義:

interface IDBCursor {
    readonly attribute Object    source;
    readonly attribute DOMString direction;
    readonly attribute any       key;
    readonly attribute any       primaryKey;
    IDBRequest update (any value);
    void       advance ([EnforceRange] unsigned long count);
    void       continue (optional any key);
    IDBRequest delete ();
}

其中的 key 屬性回傳資料的對應鍵值,而另外一個要注意的是 continue() 方法,調用此方法將以非同步的方式再次執行一個要求並且重複調用 openCursor() 建立的 IDBRequest 物件,因此我們可以透過此方法,進行資料迭代操作,逐步列舉物件倉儲中儲存的資料內容。

考慮以下的程式片段:

function list() {           
                var transaction = db.transaction([objectStoreName]);
                var store = transaction.objectStore(objectStoreName);
                var crequest = store.openCursor() ;               
                crequest.onsuccess = function (event) {
                    var cursor = event.target.result;
                    if (cursor) {                        
                        // cursor.key  ,  cursor.value                           
                        cursor.continue();
                    }                    
                };           
        }

調用openCursor() 建立 cursor ,於 success 事件處理器中,透過 event 參數取得 cursor 物件,引用 key 與 cursor 取得資料內容,每一次完成資料的讀取,緊接著引用 continue() 方法,繼續下一筆資料讀取操作,而這會再次觸發 success 事件,直到所有的資料讀取完畢。

HTML5 Indexed Database API 入門系列

沒有留言: