错误“试图对不允许突变的数据库进行突变操作。”尝试从 indexedDB 中的对象存储中删除对象时

Question

所以基本上我已经阅读了很多教程、演示和 API 规范本身，并没有走得太远，非常感谢你们在这方面的帮助。

我最近一直在努力更好地掌握 IndexedDB，但遇到了一些问题，希望对此代码提出一些批评/反馈。

这段代码中有两个我似乎无法修复的错误。

首先在加载时调用 init() 方法，该方法打开数据库并用已存储的数据填充我的列表。虽然 getAllDetails 函数在 open 函数之后，但控制台中的错误提示“db is null”。

deleteDetails 函数的第二个问题是，当尝试删除任何索引时，控制台中的错误提示“在不允许突变的数据库上尝试了突变操作。”

任何帮助将不胜感激，对于大量代码，我深表歉意！

附言。这一切都使用 FF 17 和 Chrome 22 使用 localhost 服务器进行了测试。

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

var Main = {};
Main.indexedDB = {};
Main.indexedDB.db = null;

Main.indexedDB.onerror = function(e) {
console.log(e);
};

function init() {
Main.indexedDB.open();
Main.indexedDB.getAllDetails();
}

Main.indexedDB.open = function () {
var request = indexedDB.open("DBV1",2);

//If no db exists or if the database is behind on versions then it will update.
//Though FF is the only browser atm that supports this method.
request.onupgradeneeded = function (e) {
console.log("Running UpgradeNeeded");
Main.indexedDB.db = e.target.result;
var thisDb = Main.indexedDB.db;

thisDb.onerror = function (e) {
alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);
};

if (!thisDb.objectStoreNames.contains("Profile")) {
console.log("I need to make the Profile object store.");
thisDb.createObjectStore("Profile", { keyPath: "UserId", autoIncrement: true });
}
if (!thisDb.objectStoreNames.contains("Appointments")) {
console.log("I need to make the Appointments object store.");
thisDb.createObjectStore("Appointments", { keyPath: "AppointmentId", autoIncrement: true });

}
if (!thisDb.objectStoreNames.contains("Assignment")) {
console.log("I need to make the Assignment object store.");
var objectStore = thisDb.createObjectStore("Assignment", { keyPath: "AssignementId", autoIncrement: true });

}
}; //End-UpgradeNeeded

//To make this compatible with Chrome, the onsuccess method must be used.
request.onsuccess = function (e) {
console.log("This was successful.");

Main.indexedDB.db = e.target.result;
var thisDb = Main.indexedDB.db;

thisDb.onerror = function (e) {
alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);
};

if (!thisDb.objectStoreNames.contains("Profile")) {
console.log("I need to make the Profile object store.");
thisDb.createObjectStore("Profile", { keyPath: "UserId", autoIncrement: true });
}
else{

}
if (!thisDb.objectStoreNames.contains("Appointments")) {
console.log("I need to make the Appointments object store.");
thisDb.createObjectStore("Appointments", { keyPath: "AppointmentId", autoIncrement: true });

}
else{

}
if (!thisDb.objectStoreNames.contains("Assignment")) {
console.log("I need to make the Assignment object store.");
thisDb.createObjectStore("Assignment", { keyPath: "AssignementId", autoIncrement: true });

}
else{

}


}; //End-onsuccess

request.onerror = function (e) {

alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);

};


}; //End-OpenFunction

Main.indexedDB.addDetails = function (ProfName, AppointName) {
var db = Main.indexedDB.db;

console.log("Before Prof");
var transProf = db.transaction(["Profile"], "readwrite");
var storeProf = transProf.objectStore("Profile");

console.log("Before Appo");
var transAppo = db.transaction(["Appointments"], "readwrite");
var storeAppo = transAppo.objectStore("Appointments");

var dataProf = {
"text": ProfName
};

var dataAppo = {
"text": AppointName
};

var requestProf = storeProf.put(dataProf);
requestProf.onsuccess = function (e) {
console.log("Prof data successfully entered.");
};
requestProf.onerror = function (e) {
console.log(e);
};
var requestAppo = storeAppo.put(dataAppo);
requestAppo.onsuccess = function (e) {
console.log("Appo data successfully entered.");
};
requestAppo.onerror = function (e) {
console.log(e);
};
}; //End-AddDetails

function addDetails() {
var Prof = document.getElementById("ProfileName");
var Appo = document.getElementById("AppointmentName");
Main.indexedDB.addDetails(Prof.value, Appo.value);
Main.indexedDB.getAllDetails();
};

Main.indexedDB.getAllDetails = function () {
console.log("Get all called.");
var Prof = document.getElementById("Profile");
Prof.innerHTML = "";
var Appo = document.getElementById("Appointments");
Appo.innerHTML = "";

var db = Main.indexedDB.db;

var transProf = db.transaction(["Profile"], "readwrite");
var storeProf = transProf.objectStore("Profile");

var transAppo = db.transaction(["Appointments"], "readwrite");
var storeAppo = transAppo.objectStore("Appointments");

console.log("Stores and transactions created.");
//////////////////////////////////////////////////////////////////
var cursorRequestProf = storeProf.openCursor();
cursorRequestProf.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;

renderUser(result.value, 1);
result.continue();
};
cursorRequestProf.onerror = Main.indexedDB.onerror;
/////////////////////////////////////////////////////////////////
var cursorRequestAppo = storeAppo.openCursor();
cursorRequestAppo.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;

renderUser(result.value, 2);
result.continue();
};
cursorRequestAppo.onerror = Main.indexedDB.onerror;
/////////////////////////////////////////////////////////////////
console.log("Cursors complete.");



}; //End-GetAllDetails

function renderUser(row, column) {
if(column == 1){
var Users = document.getElementById("Profile");
}
else{
var Users = document.getElementById("Appointments");
}
var li = document.createElement("li");

var t = document.createTextNode(row.text);


li.appendChild(t);

Users.appendChild(li);
};

function deleteDetails(){
var deleteIndex =  document.getElementById("DeleteNo");
Main.indexedDB.deleteIndex(deleteIndex.value);
Main.indexedDB.getAllDetails();
};

Main.indexedDB.deleteIndex = function(index){
var db = Main.indexedDB.db;

var transProf = db.transaction(["Profile"], "readwrite");
var storeProf = transProf.objectStore("Profile");

var transAppo = db.transaction(["Appointments"], "readwrite");
var storeAppo = transAppo.objectStore("Appointments");

var requestProf = storeProf.deleteIndex(index);
requestProf.onsuccess = function(e) {
console.log("Successful Prof delete");
};

requestProf.onerror = function(e) {
console.log("Error Prof Deleting: ", e);
};

var requestAppo = storeAppo.deleteIndex(index);
requestAppo.onsuccess = function(e) {
console.log("Successful Appo delete");
};

requestAppo.onerror = function(e) {
console.log("Error Appo Deleting: ", e);
};

};

Answer 1

第一个问题：您在 open 方法之后直接调用 getAllDetails() 。由于 indexeddb API 的异步特性，您无法执行此操作。必须先打开数据库，然后才能调用 getAllDetails 方法。这意味着您必须使用回调函数。

function init() { 
    Main.indexedDB.open(function (){Main.indexedDB.getAllDetails()});
} 

Main.indexedDB.open = function (callback) {  
   var request = indexedDB.open("DBV1",2); 
   request.onupgradeneeded = function (e) {   }
   request.onsuccess = function (e) {    
       Main.indexedDB.db = e.target.result;  
       callback(); 
   }
}

只有当onsuccess被调用时，你才能开始使用indexedDB。

第二个问题：索引只能在版本更改事务中删除。获得此类交易的唯一方法是打开具有更高版本号的数据库。在这种情况下，可以在 indexeddb.open 请求的 onupgradeneeded 回调中访问版本更改事务。

有关 indexeddb 的更多信息，请查看my blog。