將XML數據存儲到HTML5索引數據庫中

Question

我必須從存儲在14 MB xml文件中的66730行中顯示xml數據。

我想將數據存儲在HTML5 indexedDB中。 我讀Mozilla's "Using IndexedDB",HTML5ROCKS "Databinding UI elements with indexeddb"和HTML5ROCKS "A simple TODO list using HTML5 IndexedDB。

由於使用異步調用進行管理，我無法執行我想要的操作，我不知道在哪裏實例化objectStore。你能幫忙嗎？

window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; 
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; 
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange; 

var request = indexedDB.deleteDatabase("opinions"); 
console.log("opinions DB is deleted"); 

var db; 

function handleSeed() { 
    db.transaction(["opinion"], "readonly").objectStore("opinion").count().onsuccess = function(e) { 
    var count = e.target.result; 
    if(count == 0) { 

     $.ajax({ 
     type: 'GET', url: 'data/mergedXML_PangLee.xml.tag.sample.xml', dataType: 'xml', 
     success: function(xml) { 
      console.log("Need to generate fake data - stand by please..."); 
      $("#status").text("Please stand by, loading in our initial data."); 
      var done = 0; 
      var trans = db.transaction(["opinion"], "readwrite"); 
      var opinionsObjectStore = trans.objectStore("opinion"); 
      var comments = $(xml).find('Comment'); 

      // CODE1 
      for(var c = 0 ; c < comments.length ; c++) { 
      var opinions = $(comments[c]).find('Opinion'); 
      for(var o = 0 ; o < opinions.length ; o++) { 
       var opinion = {}; 
       opinion.type = "jugement"; 
       var resp = opinionsObjectStore.add(opinion); 
       resp.onsuccess = function(e) { 
       done++; 
       if(done == 33) { 
        $("#status").text(""); 
        renderOpinion(); 
       } else if (done % 100 == 0) { 
        $("#status").text("Approximately " + Math.floor(done/10) + "% done."); 
       } 
       } 
      } 
      } 
     } 
     }); 
    } else { 
     console.log("count is not null: " + count); 
     $("#status").text("ObjectStore already exists"); 
     renderOpinion(); 
    } 
    }; 
} 

function renderOpinion() { 

    var transaction = db.transaction(["opinion"], "readonly"); 
    var objectStore = transaction.objectStore("opinion"); 
    objectStore.openCursor().onsuccess = function(e) { 
    var cursor = e.target.result; 
    if(cursor) { 
     $("#opinions").append("<li>" + cursor.value.type + "</li>"); 
     cursor.continue(); 
    } 
    else { 
     alert("No more entriese"); 
    } 
    }; 
} 

$(document).ready(function(){ 
    console.log("Startup..."); 

    var openRequest = indexedDB.open("opinions", 1); 

    openRequest.onupgradeneeded = function(e) { 
    console.log("running onupgradeneeded"); 
    var thisDb = e.target.result; 

    if(!thisDb.objectStoreNames.contains("opinion")) { 
     console.log("I need to make the opinion objectstore"); 
     var objectStore = thisDb.createObjectStore("opinion", {keyPath: "id", autoIncrement: true}); 
    } 
    else { 
     console.log("opinion objectstore already exists"); 
    } 
    } 

    openRequest.onsuccess = function(e) { 
    db = e.target.result; 

    db.onerror = function(e) { 
     console.log("***ERROR***"); 
     console.dir(e.target); 
    } 
    handleSeed(); 
    } 
}) 

[編輯]

觀察到的行爲：

• 當打開頁面時，alert("Sorry, an unforseen error was thrown.")看起來像30倍（因爲我有30個項目來存儲）。
• $("#todoItems").append("<li>" + cursor.value.type + "</li>");從來沒有叫
• 這就像我不能跟隨奔跑與螢火蟲，我的斷點不工作，像異步是一件事。 f.i.如果我在第resp = objectStore.add(opinion);和alert("Sorry, an unforseen error was thrown.");行有兩個斷點，則第二個斷點不會被調用。

預期的行爲：

• 存儲XML項目成HTML5索引
• 檢索存儲在HTML5索引中的項目，並將其顯示爲<ul> HTML列表。

控制檯日誌：

• 顯示文本 「錯誤上插入一個意見」
• 而一個NotFoundError: The operation failed because the requested database object could not be found. For example, an object store did not exist but was being opened. [Break On This Error] var objectStore = db.objectStore(["opinions"], "readonly");

[EDIT2]

我糾正代碼塊。現在它正在工作。

Answer 1

通過嘗試和錯誤我終於使代碼工作。該問題中的代碼可用於其他XML以索引DB用途。