将XML数据存储到HTML5 indexedDB中 [英] Store XML data into HTML5 indexedDB

问题描述

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

I have to display data from a xml with 66730 lines stored in a 14 MB xml file.

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

I would like to store data in a HTML5 indexedDB. I read Mozilla's "Using IndexedDB", HTML5ROCKS "Databinding UI elements with indexeddb" and HTML5ROCKS "A simple TODO list using HTML5 IndexedDB.

I因为管理异步调用而无法执行objectStore，所以无法执行我想要的操作。你能帮忙吗？

I could not perform what I wanted to because of managing with asynchronous calls and I do not know where to instantiate the objectStore. Could you help?

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

观察到的行为：

• 当pa ge打开， alert（抱歉，抛出了一个不可预见的错误。）出现了30次（因为我有30个要存储的项目）。


• $（＃todoItems）。append（< li>+ cursor.value.type +< / li>）; 永远不会被调用


• 这就像我无法跟随firebug一起运行，我的断点不起作用，就像asynchronymous一样。 f.i.如果我在行上有两个断点 resp = objectStore.add（views）; 和 alert（抱歉，抛出了一个不可预见的错误。）; ，永远不会调用第二个。

• When the page is opened, alert("Sorry, an unforseen error was thrown.") appears like 30 times (as I have 30 items to store).
• The $("#todoItems").append("<li>" + cursor.value.type + "</li>"); is never called
• It is like I cannot follow the run with firebug, my breakpoint does not work, like asynchronymous was a matter. f.i. if I had two breakpoints on lines resp = objectStore.add(opinion); and alert("Sorry, an unforseen error was thrown.");, the second one is never called.

预期行为：

• 将xml项目存储到html5 indexeddb中


• 检索存储在html5 indexeddb中的项目并将其显示为< ul> html list。

• Store the xml items into an html5 indexeddb
• Retrieve the items stored in an html5 indexeddb and display them into an <ul> html list.

控制台日志：

• 显示文本插入意见时出错


• 并且 NotFoundError：操作失败，因为请求找不到数据库对象。例如，对象存储不存在但正在打开。
[打破此错误] var objectStore = db.objectStore（[opinion]，readonly）;

• Display the text "Error on inserting an opinion"
• And a 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");

我更正了代码块。它现在正在运行。

I corrected the code block. And it is working now.

推荐答案

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

By tries and errors I finally make the code work. The code in the question can be used for other XML to indexedDB uses.

这篇关于将XML数据存储到HTML5 indexedDB中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！