将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用途。