Question

所以基本上我一直在阅读相当多的教程，演示和API规范本身并没有走得太远，非常感谢你们的帮助。

我最近一直试图更好地掌握IndexedDBs并遇到一些问题，并希望对此代码提出一些批评/反馈。

此代码中有两个错误似乎无法修复。

首先加载方法init（）被调用，它打开数据库并使用已存储的数据填充我的列表。尽管getAllDetails函数位于open函数之后，但控制台中的错误表明＆＃34; db为null＆＃34;。

使用deleteDetails函数的第二个问题是，当尝试删除任何索引时，控制台中的错误显示＆＃34;在不允许突变的数据库上尝试进行变异操作。＆＃34;

任何帮助都将非常感谢，我为大量的代码道歉！

聚苯乙烯。这都使用了使用FF 17和Chrome 22的本地主机服务器进行了测试。

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。

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

1 个答案: