IndexedDB - 无法创建多个对象存储并在它们上进行事务答案

【问题标题】：IndexedDB - Unable to create more than one object stores and make transactions on themIndexedDB - 无法创建多个对象存储并在它们上进行事务
【发布时间】：2015-11-18 12:15:04
【问题描述】：

我正在使用 HTML5 的 indexedDB。我在创建第二个对象存储和进行交易时遇到问题。第一个对象存储工作正常，但第二个不工作。我尝试了两种方法；两者都无法正常工作。

在第一种方法中，第二个对象存储创建但它采用第一个对象存储的属性（例如键路径，自动增量）。在这种方法中，我的第二个对象存储不会进行多次交易。

这是第一种方法

var request, secondRequest, db, version;
var database;


if (!window.indexedDB) {
    alert("Your Browser does not support IndexedDB");
}
else {
    var dbName = "MyStatus";
    request = window.indexedDB.open(dbName, 2);
    request.onerror = function(event) {
        alert("Error opening DB", event);
    };
    request.onupgradeneeded = function (event) {
        alert("Upgrading");
        db = event.target.result;
        var tblIncident = db.createObjectStore("Incident", { keyPath: "MyID", unique: true });

        var tblIncidentStatus = db.createObjectStore("tblVolunteerIncidentStatus",{ keyPath: "ID", unique: false, autoincrement: true });
    };

    request.onsuccess = function(event) {
        alert("Success opening DB");
        db = event.target.result;
        alert(db);
        $(document).trigger('insert');
    };
   }

   $(document).bind('insert', function () {
   var incidID = 0;
   var transaction = db.transaction(["Incident"], "readwrite");
    transaction.oncomplete = function (event) {
     alert("Case Inserted Successfully :)");
    incidID++;
    };

    transaction.onerror = function (event) {
        alert("Case Insertion Error :(");
    };
    var oStoreIncident = transaction.objectStore("Incident");

    oStoreIncident.add({ INCID: incidId, INCDETAILS: "" });
    });

  $(document).bind('insertStatus', function () {
   var incidID = 0;
   var transaction = db.transaction(["IncidentStatus"], "readwrite");
    transaction.oncomplete = function (event) {
        alert("Case Inserted Successfully :)");
   incidID++;
    };

    transaction.onerror = function (event) {
        alert("Case Insertion Error :(");
    };
    var oStoreIncident = transaction.objectStore("IncidentStatus");

    oStoreIncident.add({ INCID: incidId, INCDETAILS: "" });
     });

然后我点击了这个链接How to Create Multiple Object Stores

并且使用这个我的第二个对象存储没有创建因此我的交易也无法正常工作。

这里是第二种方法

 if (!window.indexedDB) {
    alert("Your Browser does not support IndexedDB");
}
else {
    var dbName = "MyStatus";
    request = window.indexedDB.open(dbName, 2);
    request.onerror = function(event) {
        alert("Error opening DB", event);
    };
    request.onupgradeneeded = function (event) {
        alert("Upgrading");
        db = event.target.result;
        var tblIncident = db.createObjectStore("Incident", { keyPath: "MyID", unique: true });

    };

    request.onsuccess = function(event) {
        alert("Success opening DB");
        db = event.target.result;
        alert(db);
        version = parseInt(db.version);
        db.close();

        request2 = window.indexedDB.open(dbName, 3);
        request2.onupgradeneeded = function (evnt) {
            alert("on upgrade needed");
            db = evnt.target.result;
            alert("DB: " + db);
            var tblIncidentStatus = db.createObjectStore("IncidentStatus");
            alert(tblIncidentStatus);

        };
        request2.onsuccess = function (evnt) {
            db = evnt.target.result;
            alert("Second Table Created Successfully");
        };
        request2.onerror = function (evnt) {
            db = evnt.target.result;
            alert("Second Table not creating " + db);
        };
     $(document).trigger('insert');
     $(document).trigger('insertStatus');
       };
    }

   $(document).bind('insert', function () {
   var incidID = 0;
   var transaction = db.transaction(["Incident"], "readwrite");
    transaction.oncomplete = function (event) {
     alert("Case Inserted Successfully :)");
    incidID++;
    };

    transaction.onerror = function (event) {
        alert("Case Insertion Error :(");
    };
    var oStoreIncident = transaction.objectStore("Incident");

    oStoreIncident.add({ INCID: incidId, INCDETAILS: "" });
    });

  $(document).bind('insertStatus', function () {
   var incidID = 0;
   var transaction = db.transaction(["IncidentStatus"], "readwrite");
    transaction.oncomplete = function (event) {
        alert("Case Inserted Successfully :)");
   incidID++;
    };

    transaction.onerror = function (event) {
        alert("Case Insertion Error :(");
    };
    var oStoreIncident = transaction.objectStore("IncidentStatus");

    oStoreIncident.add({ INCID: incidId, INCDETAILS: "" });
     });

我是 indexedDB 的新手；如果有人有解决方案，请分享。

提前致谢。

【问题讨论】：

您似乎正在丢弃事物的句柄，因为超出了您不保留引用的函数范围。你如何确认它是创建的？您更喜欢使用哪种浏览器和平台进行测试？浏览器是否启用以允许 IndexDB，也许可以找到有关该主题的测试网站并查看是否创建了数据库。 Web 控制台中有哪些 JS 错误和异常？
我只在谷歌浏览器上测试它。 IndexedDB 不支持 Firefox、Opera 和 IE。网络控制台没有任何错误；我一步步调试了很多次。请告诉我哪个参考没有保留？请提及（从上面提到的）您讨论了哪种方法？
所以如果你断点并逐行执行代码（在每个回调函数中设置断点，如onupgradeneeded。如果你使用 Chrome F12，然后使用资源选项卡，然后使用列表中的 IndexDB？你知道吗？对吗？您声称您从未见过的代码中有许多警报（）？
是的，我按照你所说的方式做了。我设置警报是为了确认我犯错的断点。
因此，对于您尝试的每种方法，请记录您看到的警报的确切顺序和消息。您声称在 Chrome 开发人员工具的 IndexedDB 窗格中没有创建任何内容（在 chrome 中按 F12）。这是真的吗？

标签： javascript html transactions indexeddb

【解决方案1】：

使用此模式打开数据库连接和升级架构：

var open = indexedDB.open(dbName, 3);
open.onupgradeneeded = function(e) {
   var db = open.result;
   if (e.oldVersion < 1) {
       // initial database creation
       // (your code does nothing here)
   }
   if (e.oldVersion < 2) {
       // version 1 -> 2 upgrade
       db.createObjectStore("Incident", { keyPath: "MyID", unique: true });
       // ...
   }
   if (e.oldVersion < 3) {
       // version 2 -> 3 upgrade
       db.createObjectStore("IncidentStatus");
       // ...
   }
};
open.onsuccess = function(e) {
    var db = open.result;
    // db.version guaranteed to be 3 (or open would have failed)
};

【讨论】：

【解决方案2】：

在第二个示例中，您无法打开到第二个对象存储的事务的原因是它尚未创建。您即将触发插入事件。您应该在 request2 的 onsuccess 回调中调用对象存储的插入触发器。

正如 joshua 所说，您应该在一次调用中捆绑升级，检查版本。您还可以在一个 onupgradeneeded 事件中创建多个对象存储。

【讨论】：

谢谢#Kristof，它对我有用 :) 我按照 #joshua 和你提供的说明进行操作。