IndexedDB DOM IDBDatabase异常11即使使用oncomplete

IndexedDB DOM IDBDatabase Exception 11 even after using oncomplete

本文关键字:oncomplete DOM IDBDatabase 异常 IndexedDB      更新时间:2023-09-26

我是IndexedDB概念的新手。我试图在IndexedDB中存储电影列表并检索它。但由于某种原因,当我试图检索它有一个DOM IDBDatabase异常11在chrome浏览器。我尝试通过使用简单的警报来检索它。我还试图通过将警报放入onComplete事件来检索数据,但这似乎也是一个失败。有人能让我知道我做错了什么。下面是我的代码。

const dbName = "movies";
var request = indexedDB.open(dbName, 1);
request.onerror = function(event) {
    alert("Seems like there is a kryptonite nearby.... Please Check back later");
};
request.onsuccess = function(event) {
    var db = event.target.result;
var transaction = db.transaction(["movies"],"readwrite");
var objectStore = transaction.objectStore("movies");
var request1 = objectStore.get("1");
request1.result.oncomplete=function(){
alert("The movie is"+request1.result.name);//This is the place where i get the error
}
};
request.onupgradeneeded = function(event) {
    db = event.target.result;
    var objectStore = db.createObjectStore("movies", { keyPath: "movieid" });
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("runtime", "runtime", { unique: false });
    for (var i in movieDataToStore) {
objectStore.add(movieDataToStore[i]);
}};

我还是不知道上一个程序出了什么问题。我重写了上面的程序,它像一个魅力。下面是代码。希望这能帮助任何被这个问题困住的人。如果有人知道上次出了什么问题,请分享你的想法。

var db; //database will be stored in this value when success is called
var movieDataToStore = [{ movieid: "1", name: "Keep my Storage Local", runtime:"60"},
            { movieid: "2", name: "Rich Internet Conversations", runtime:"45"},
            { movieid: "3", name: "Applications of the Rich and Famous", runtime:"30"},
            { movieid: "4", name: "All Jump All eXtreme", runtime:"45"}];
window.query = function() {
    db.transaction("movies").objectStore("movies").get("1").onsuccess = function(event) {
        alert("QUERY: CThe first movie is" + event.target.result.name);
    };};
window.onload = function() {
    if (!window.indexedDB) {
        window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
    }
else{
    var request = indexedDB.open("movies", 1);
    request.onerror = function(event) {
          alert("Seems like there is a kryptonite nearby.... Please Check back later");
};
    request.onsuccess = function(event) {
    db = this.result;
    query();
    };
    request.onupgradeneeded = function(event) {
         var db = event.target.result;
         if(db.objectStoreNames.contains("movies")) {
              db.deleteObjectStore("movies");
            }
         var objectStore = db.createObjectStore("movies", { keyPath: "movieid"});
         objectStore.createIndex("name", "name", { unique: false });
          objectStore.createIndex("runtime", "runtime", { unique: false });
          for (var i in movieDataToStore) {
                objectStore.add(movieDataToStore[i]);
              }
    };
        }   
};
  1. 我认为这是不好的做法,在onupupdatenenedcontext中插入数据。你应该在其他时间在一个不相关的函数中单独做这个。事实上,尝试在自上次页面加载以来版本已增加的数据库上插入数据将自动触发升级事件。
  2. 虽然许多在线示例将数据库连接句柄(您的db var)推入一些全局作用域变量,但这也是一种不好的做法,会导致错误。只将回调函数中的db变量作为参数访问。换句话说,就是你的openRequest。Onsuccess函数应该将db变量传递给查询函数。这也减少了以后任何垃圾收集问题的可能性,并使数据库连接保持打开状态(indexedDB的设计者允许这种情况,但通常应该避免这种情况)。
  3. 如果你的电影id是整数,我不清楚为什么你存储和检索它们作为字符串。您可以存储整数值。你可以给store.get传递一个整数。
  4. 您正在使用…在不当。它会起作用的,但是……In用于遍历对象字面值的键(如var x = {key:value})。使用普通的for循环或Use数组。
  5. 正如您在固定代码中发现的那样,最好使用request。Onsuccess和request.onerror。还有一个transaction.oncomplete。但是我不确定是否有request.oncomplete。发生的事情是你正在设置一个IDBRequestObject的oncomplete属性,但这没有做任何事情,因为代码从未触发它。
  6. DOM 11通常表示您试图访问不存在或处于错误状态的表。通常这是由于其他地方的错误而发生的,比如连接时从未调用onupgradeneed。这是令人困惑的,但鉴于你的代码是设置方式,基本上db得到创建的第一次页面加载,但然后永远不会再创建,所以在开发中,如果你做了改变,但不增加你的db版本,你将永远不会看到他们。