javascript - 异步使用 IndexedDB

Question

加载数据并将它们存储在 indexeddb 数据库中。我定期遇到数据库崩溃并无法访问它的情况。请给我一个如何异步使用 indexeddb 的解决方案!

我现在使用的示例代码:

var dataTotal = 0;
var threads = 6;

//openIndexeddbConnection();

function start(total){

dataTotal = total;
  for (var i = 0; i < threads; i++) {
    loadData(i);
  }
}

function loadData(dataNum){
  var dataNext = dataNum + threads;
  if(dataNext > dataTotal){
    //checkEnd();
    return;
  }

  $.ajax({
    url: baseUrl,
    data: {offset: dataNum},
    success: function (data) {
      successData(dataNext, data);
    },
    type: 'GET'
  });
}

function successData(dataNext, data){
  var dataArray = data.split(';');

  saveData(dataArray);

  loadData(dataNext);
}

function saveData(dataArray){

  putItem();
  function putItem(i) {
    var count = i || 0;
    if(dataArray.length <= i){
      return;
    }

    var transaction = Indexeddb.transaction([dataTableName], "readwrite");
    transaction.onsuccess = function (event) {
      //continue
      putItem(count);
    };
    var objectStore = transaction.objectStore(dataTableName);

    var request = objectStore.add({data: dataArray[count++]});
  }
}

Answer 1

您可以使用 promises 将数据异步加载和保存到 indexedDB。这里有两个示例函数，用于将数据加载和保存到 indexedDB 中的简单对象存储。

从 indexedDB 异步加载:

function loadFromIndexedDB(storeName, id){
  return new Promise(
    function(resolve, reject) {
      var dbRequest = indexedDB.open(storeName);

      dbRequest.onerror = function(event) {
        reject(Error("Error text"));
      };

      dbRequest.onupgradeneeded = function(event) {
        // Objectstore does not exist. Nothing to load
        event.target.transaction.abort();
        reject(Error('Not found'));
      };

      dbRequest.onsuccess = function(event) {
        var database      = event.target.result;
        var transaction   = database.transaction([storeName]);
        var objectStore   = transaction.objectStore(storeName);
        var objectRequest = objectStore.get(id);

        objectRequest.onerror = function(event) {
          reject(Error('Error text'));
        };

        objectRequest.onsuccess = function(event) {
          if (objectRequest.result) resolve(objectRequest.result);
          else reject(Error('object not found'));
        };
      };
    }
  );
}

异步保存到 indexedDB:

function saveToIndexedDB(storeName, object){
  return new Promise(
    function(resolve, reject) {
      if (object.id === undefined) reject(Error('object has no id.'));
      var dbRequest = indexedDB.open(storeName);

      dbRequest.onerror = function(event) {
        reject(Error("IndexedDB database error"));
      };

      dbRequest.onupgradeneeded = function(event) {
        var database    = event.target.result;
        var objectStore = database.createObjectStore(storeName, {keyPath: "id"});
      };

      dbRequest.onsuccess = function(event) {
        var database      = event.target.result;
        var transaction   = database.transaction([storeName], 'readwrite');
        var objectStore   = transaction.objectStore(storeName);
        var objectRequest = objectStore.put(object); // Overwrite if exists

        objectRequest.onerror = function(event) {
          reject(Error('Error text'));
        };

        objectRequest.onsuccess = function(event) {
          resolve('Data saved OK');
        };
      };
    }
  );
}

示例使用代码

var data = {'id' : 1, 'name' : 'bla'};

saveToIndexedDB('objectstoreName', data).then(function (response) {
  alert('data saved');
}).catch(function (error) {
  alert(error.message);
});

// Load some data
var id = 1;
loadFromIndexedDB('objectstoreName', id ).then(function (reponse) {
  data = reponse;
  alert('data loaded OK');
}).catch(function (error) {
  alert(error.message);
});