Question

我刚刚开始对indexeddb进行研究，以将数据存储在客户端。我能够执行基本的CRUD操作，因此我开始编写实际的实现案例，其中用户应以json的形式从服务器检索数据，然后将其存储在indexedDB objectStore中。现在这是我面临的问题，我知道ajax和IndexedDB中的事务都是异步的，所以我在成功事件中调用事务，它使我出错，提示“ InvalidStateError：在未执行的数据库上尝试了变异操作允许突变。”在我称之为交易打开的那一行上。这是javascript代码和json文件

// Javascript IndexedDB start 
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

// open db
var dbase;
var gotWidgetTemplates = false;
var widgetTemplets;
function init() {
    var databaseName = "ADTClientDB";
    var databaseVersion = 1;
    var open = indexedDB.open(databaseName, databaseVersion);
    open.onupgradeneeded = function (e) {
    var db = e.target.result;
       if (!db.objectStoreNames.contains("WidgetTemplate")) {
        var widgetTemplateObj = db.createObjectStore("WidgetTemplate", { 
  keyPath: 'name' });
        widgetTemplateObj.createIndex("image", "image", { unique: false });
        widgetTemplateObj.createIndex("html", "html", { unique: false });
        widgetTemplateObj.createIndex("css", "css", { unique: false });
        widgetTemplateObj.createIndex("rules", "rules", { multiEntry: true });
    }

}
open.onsuccess = function (e1) {
    dbase = e1.target.result;
     getTemplates(dbase);
      dbase.close();
}
open.onerror = function () {
    alert("Error opening the database");
}
function getTemplates(dbase) {
 $.ajax({
        url: "../Sample Json files/widgetTemplates.json",
        type: "GET",
        success:
            function (data) {
                var obj = JSON.parse(JSON.stringify(data));
                widgetTemplets = obj.widgets_info;
                gotWidgetTemplates = true;
                if (gotWidgetTemplates && widgetTemplets !== null) {
                 // I tried putting the transaction and store here,it was giving me same error..
                    for (var temp in widgetTemplets) {
                        // error on the next line
                        var trans = dbase.transaction(["WidgetTemplate"], "readwrite");
                        var store = trans.objectStore("WidgetTemplate");
                        store.add(widgetTemplets[temp]);
                    }
                }
            },
        error: function (error) {
            console.log(arguments);
        }
    });
}

我试图像这样放置setTimeout（）

function addTemps(dbase) {
   if (gotWidgetTemplates && widgetTemplets !== null) {
      var trans = dbase.transaction(["WidgetTemplate"], "readwrite");
      var store = trans.objectStore("WidgetTemplate");
      for (var temp in widgetTemplets) {         
         store.add(widgetTemplets[temp]);
      }
   }
   else {
      setTimeout(addTemps, 7000);
   }  
}

它仍然在创建事务时给我相同的错误，也给我“ tooManyRecursions”错误。我试图像这样

      $.get("../Sample Json files/widgetTemplates.json").then(
            function (data0) {
                console.log(data0);
                var obj = JSON.parse(JSON.stringify(data0));
                widgetTemplets = obj.widgets_info;
                var trans1 = dbase.transaction(["WidgetTemplate"], "readwrite");
                var store1 = trans1.objectStore("WidgetTemplate");
                for (var temp in widgetTemplets) {
                    store1.add(widgetTemplets[temp]);
                }
                console.log(obj);
            }, function (xhr, state, error) {
            debugger;
            console.log(arguments);
        });

它在交易行给我同样的错误。这是json

{
  "widgets_info": [
        {
          "name": "TextInput",
          "image": "TEXTINPUT.PNG",
          "html": "<label for=\"uname\">LABEL</label>  <input type=\"text\" id = \"uname\" name=\"uname\">",
          "css": "{width : 30%; height:10%;}",
          "rules": {
            "on the event of": [
              "NONE",
              "Single left mouse click"
            ],
            "do these": [
              "NONE",
              "Trigger behavior"
            ]
          }
        }
      ]
    }

我可以看到ajax成功链接（Ajax IndexedDB Delete Current Sucesfull Upload内的交易是可能的我想知道为什么我无法做到这一点。我尝试了所有可以做的事情，浏览了所有可以找到的内容，但是找不到解决方案。一个解决方案/原因将不胜感激。谢谢！

错误“在不允许突变的数据库上尝试了突变操作。”尝试在ajax成功事件内打开交易时

0 个答案: