索引DB中的「無法調用未定義的」錯誤的方法'事務'

Question

下面是我的代碼。它第一次運行良好，但一旦我刷新頁面，它會產生未捕獲的TypeError：無法調用未定義的方法'事務'。

基本上我從數據從數據庫中檢索，並對其進行編碼成可用的JSON數據類型，以避免插入問題納入我的表。

$(document).ready(function() { 

//prefixes of implementation that we want to test 
window.indexedDB = window.indexedDB || 
        window.mozIndexedDB || 
        window.webkitIndexedDB || 
        window.msIndexedDB; 

//prefixes of window.IDB objects 
window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || 
         window.msIDBTransaction; 

window.IDBKeyRange = window.IDBKeyRange || 
        window.webkitIDBKeyRange || 
        window.msIDBKeyRange 

if(!window.indexedDB){ //alert user if browser does not support 
    window.alert("Your browser doesn't support a stable version of IndexedDB.") 
} 

var request = window.indexedDB.open("runningClub", 1); //create a runningClub database 

var browserDB; 

request.onsuccess = function(event){ 
    browserDB = request.result; 
}; 

var raceIDs = []; 

$(".raceID").each(function() { 
    raceIDs.push(" raceID = " + $(this).val()); 
}); 

$.ajax({ 
    url: 'controller/AJAX/userAction.php', 
    type: 'post', 
    dataType: 'json', 
    data: { statement : "getRaceResult", raceIDs : raceIDs }, 
    success: function(data) { 

     const results = data; 

     request.onupgradeneeded = function(event){ 
      var browserDB = event.target.result; 
      var objectStore = browserDB.createObjectStore("raceResult", {keyPath: "resultID"}); 
      for(var i in results){ 
       objectStore.add(results[i]);  
      } 
     } 

     var objectStore = browserDB.transaction("raceResult").objectStore("raceResult"); 

     objectStore.openCursor().onsuccess = function(event){ 
      var cursor = event.target.result; 
      if (cursor){ 
       $("#memberName").append("<option>" + cursor.value.memberName + "</option>"); 
       cursor.continue(); 
      } 
     }; 
    } 
}); 
}); 

Answer 1

感謝您發佈（幾乎）完整的代碼。不幸的是，如果不知道來自後端的數據對象的結構，我不能完全複製您的問題。介意出版嗎？

這就是說，我寧願某些您的問題是使用const。

const results = data; 

我不相信這種類型的數據是「structured clone」 -able。鑑於JSON是完全可克隆的，我認爲這是我們想要從您的API返回的（例如可以被忽略以產生function的JavaScript），使用此關鍵字似乎是您的問題的可能罪魁禍首。

更新1通過這樣做，你的異步編程有很多問題。

• 數據庫在ajax請求之前打開，而不是在成功回調之後。似乎謹慎的做法是將此轉入回調。
• browserDB是在success回調不被保證的異步操作完成之前運行定義（因此browserDB是不確定的）
• request.onsuccess被稱爲兩次（你可能沒有意識到這一點，因爲它的怪異行爲）：兩當沒有upgradeneeded事件觸發，當一個upgradeneeded事件觸發，所以你重新定義browserDB有意無意DB時，還不存在

更新2這裏的大部分工作，simplified Fiddle。我很遺憾，我花了多少時間來完成代碼的工作。

更多的問題（超出const）：

• 硬編碼的數據庫版本
• 重用versionchange事件添加/獲取數據是一個壞主意
• 需要使用readwrite事務添加數據
• openCursor - 但不提供resultID keypath的參數
• 在獲取數據之前，您沒有正在監聽成功的添加
• 你不鏈接你的成功事件獲取數據

電流回路的做法是站不住腳之前添加。但我得到它與一個單一的添加和光標獲取。您可以重構爲多重添加方法，但您需要注意您的異步（基於我所看到的，我建議您堅持簡單）。

$.ajax({ 
    url: '/echo/json/', 
    type: 'post', 
    dataType: 'json', 
    data: { 
    json: JSON.stringify({ 
     resultID: new Date().getTime(), 
     raceID: "1", 
     memberID: "824", 
     runtime: "00:31:26", 
     memberName‌: "Mark Hudspith" 
    }) 
    }, 
    success: function (data) { 
    var request, 
     upgrade = false, 
     doTx = function (db, entry) { 
     addData(db, entry, function() { 
      getData(db); 
     }); 
     }, 
     getData = function (db) { 
     db.transaction(["raceResult"], "readonly").objectStore("raceResult").openCursor(IDBKeyRange.lowerBound("0")).onsuccess = function (event) { 
      var cursor = event.target.result; 
      if (null !== cursor) { 
      console.log("YOUR DATA IS HERE", cursor.value.memberName‌); 
      cursor.continue(); 
      } 
     }; 
     }, 
     addData = function (db, entry, finished) { 
     var tx = db.transaction(["raceResult"], "readwrite"); 
     tx.addEventListener('complete', function (e) { 
      finished(); 
     }); 
     tx.objectStore("raceResult").add(entry); 
     }; 
    request = window.indexedDB.open("runningClub"); 
    request.onsuccess = function (event) { 
     if (!upgrade) { 
     doTx(request.result, data); 
     } 
    }; 
    request.onupgradeneeded = function (event) { 
     var db = event.target.result; 
     db.createObjectStore("raceResult", { 
     keyPath: "resultID" 
     }); 
     setTimeout(function() { 
     doTx(db, data); 
     }, 5000); 
    } 
    } 
});