IndexedDB DOM IDBDatabase異常11即使使用oncomplete

Question

我對IndexedDB Concepts很新。我試圖在IndexedDB中存儲電影列表並檢索它。但由於某種原因，當我嘗試檢索它時，在Chrome瀏覽器中有一個DOM IDBDatabase異常11。我嘗試通過使用簡單的警報來檢索它。我還嘗試通過將警報放入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]); 
}}; 

Answer 1

我還不知道最後一個程序有什麼問題。我重寫了上面的程序，它像一個魅力。這裏是代碼。希望這有助於任何堅持這個問題的人。此外，如果有人知道上次發生了什麼問題，請分享您的想法。

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]); 
       } 
    }; 

     } 
}; 

Answer 2

1. 我認爲這是不好的做法，在onupgradeneeded上下文插入數據。你應該在其他時間以不相關的功能單獨做這件事。實際上，嘗試在自上次頁面加載後版本增加的數據庫上插入數據時，會自動爲您觸發upgradeneeded事件。
2. 雖然許多在線示例將數據庫連接句柄（您的db var）放到某個全局範圍變量中，但這也是一種不好的做法，會導致錯誤發生。只能在回調中訪問數據庫變量作爲參數。換句話說，你的openRequest.onsuccess函數應該把db變量傳遞給查詢函數。這也減少了後來發生垃圾收集問題的可能性，並使數據庫連接保持打開狀態（indexedDB的設計者允許使用這些連接，但通常應避免）。
3. 如果你的電影ID是整數，我不清楚你爲什麼要將它們存儲和檢索爲字符串。您可以存儲整數值。您可以將一個整數傳遞給store.get。
4. 您正在使用for ... in incorrectly。它會工作，但是... in用於循環對象文字的鍵（如var x = {key：value}）。迭代你的電影數組時，使用正常的循環或使用array.foreach。
5. 正如您在固定代碼中發現的那樣，最好使用request.onsuccess和request.onerror。還有一個交易。不完整。但我不確定是否有請求。不完整。發生什麼事是你設置IDBRequestObject的oncomplete屬性，但是這樣做什麼都不做，因爲代碼從不觸發它。
6. DOM 11通常表示您嘗試訪問不存在或處於不正確狀態的表。通常這是由於其他地方的錯誤，比如onupgradeneeded在連接時不會被調用。這是令人困惑的，但考慮到代碼的設置方式，基本上db是在第一次加載頁面時創建的，但不會再被創建，所以在開發時，如果你做了修改，但不增加你的db版本，你永遠不會看到他們。