如何将 IndexedDB 表数据检索到变量？答案

【问题标题】：How to retrieve IndexedDB table data to variable?如何将 IndexedDB 表数据检索到变量？
【发布时间】：2014-11-26 05:30:15
【问题描述】：

我在 IndexedDB 表中有一些非常简单地包含这些数据的数据：

var Customers = [
   { ssn: "123-45-6666", name: "Andrew", age: 22, email: "andrew@hotmail.com" },
   { ssn: "555-66-7777", name: "Gail", age: 25, email: "gail@email.me" }
];

然后我有这个函数从 IndexedDB 取回数据：

function RetrieveTableRows(Table) {
   var returnData = [];

   var db = window.indexedDB.db;
   var trans = db.transaction([Table], "readwrite");
   var store = trans.objectStore(Table);

   var keyRange = IDBKeyRange.lowerBound(0);
   var cursorRequest = store.openCursor(keyRange);

   cursorRequest.onerror = window.indexedDB.onerror;

   cursorRequest.onsuccess = function(e) {
      var result = e.target.result;
      if(!!result == false) {
         return;
      }
      returnData.push(result.value);

      result.continue();
   };    

   return returnData; 

}

我意识到它不起作用，因为 onsuccess 函数是异步的，但是我无法找到解决方案。

简单地说，我希望能够写：

var myCustomers = RetrieveTableRows('customers');

然后能够使用变量 myCustomers - 这可能吗？

我尝试过使用JQuery.deferred(); 方法，但这似乎不起作用，我知道我可以做这样的事情：

    transaction.oncomplete = function() {
        ReturnTableRows(returnData);
    };                  
}
function ReturnTableRows(data) {
   //do something with the array of data
}

但我不知道如何将其传递回 myCustomers 变量。

【问题讨论】：

标签： javascript jquery arrays asynchronous indexeddb

【解决方案1】：

使用延迟对象你应该可以做这样的事情

function RetrieveTableRows(Table) {
   var returnData = [];
   //setup deferred object
   var defer = $.Deferred();
   var db = window.indexedDB.db;
   var trans = db.transaction([Table], "readwrite");
   var store = trans.objectStore(Table);

   var keyRange = IDBKeyRange.lowerBound(0);
   var cursorRequest = store.openCursor(keyRange);

   cursorRequest.onerror = window.indexedDB.onerror;

   cursorRequest.onsuccess = function(e) {
      var result = e.target.result;
      if(!!result == false) {
         //when done resolve the promise, you could also do more 
         //checking and reject the data so you can handle
         //errors
         defer.resolve(returnData);

         //Make sure we exit the function once we run out of data!
         return
      }
      returnData.push(result.value);

      result.continue();
   };    

   //return the promise
   return defer.promise(); 

}

//########### then to use this ###########

//this is now a promise
var myCustomersPromise = RetrieveTableRows('customers');
var myCustomers;

//action todo when promise is resolved/rejected
$.when(myCustomersPromise ).done(function(data){
   //do something with the data/assign it to you var here
   myCustomers= data;
}).fail(function(data){

});

虽然我之前实际上没有使用过 indexedDB，所以可能误解了查询是如何知道它完成的（我假设result.continue() 再次调用了onSuccess，当它遍历所有数据时结果为假）但是这个是我在应用程序中异步执行任何操作时使用的设置

【讨论】：

我在之前对延迟方法的测试中确实做到了这一点，但我遇到了错误。虽然通过重新审视这一点，我找到了我收到该错误的原因 - 像你一样，我删除了 if(!!result == false) 语句中的“return”字段。
我已将返回添加到代码中，因此我可以接受您的回答 - 谢谢！ :)

【解决方案2】：

我发现另一种方法使用更少的代码，更简单并且不需要 JQuery。

设置：

// Create the function(s) to grab and store the data
var myCustomers;

var getData = {
   customers: function(data) {
      myCustomers = data
   }
}

呼叫：

//Send the callback function we want into the retrieve function
trans.oncomplete = function (e) {
   RetrieveTableRows('Customers', getData.customers)     
};

功能：

function RetrieveTableRows(Table, Callback) {
   var returnData = [];

   var db = window.indexedDB.db;
   var trans = db.transaction([Table], "readwrite");
   var store = trans.objectStore(Table);

   var keyRange = IDBKeyRange.lowerBound(0);
   var cursorRequest = store.openCursor(keyRange);

   cursorRequest.onerror = window.indexedDB.onerror;

   cursorRequest.onsuccess = function(e) {
      var result = e.target.result;
      if(!!result == false) {
         // Send the information back to our specified function
         Callback(returnData);
         return
      }
      returnData.push(result.value);

      result.continue();
   };    

}

【讨论】：