0

我必须显示来自 xml 的数据，其中 66730 行存储在 14 MB xml 文件中。

我想将数据存储在 HTML5 indexedDB 中。我阅读了Mozilla 的“使用 IndexedDB”、HTML5ROCKS“使用 indexeddb 的数据绑定 UI 元素”和HTML5ROCKS“使用 HTML5 IndexedDB 的简单 TODO 列表。

由于使用异步调用进行管理，我无法执行我想要的操作，而且我不知道在哪里实例化 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>");永远不会被调用
  • 就像我不能用 firebug 跟踪运行，我的断点不起作用，就像异步是一个问题。fi 如果我在 和 行上有两个断点resp = objectStore.add(opinion);，alert("Sorry, an unforseen error was thrown.");则永远不会调用第二个断点。

预期行为：

  • 将 xml 项存储到 html5 indexeddb
  • 检索存储在 html5 indexeddb 中的项目并将它们显示到<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");

[编辑2]

我更正了代码块。它现在正在工作。

4

1 回答 1

-2

通过尝试和错误，我终于使代码正常工作。问题中的代码可用于其他XML 到 indexedDB用途。

于 2012-11-19T10:38:25.880 回答