How to work with IndexedDB asynchronously?

Question

Download the data and save it in the indexeddb database. Periodically, I have a database crash and lose access to it. Please give me a solution on how to use indexeddb asynchronously!

Example code that I use now:

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

I used idb , a simple library that wraps IndexedDB with promises. This simplifies the use of asynchronous DB actions.

If you target Chrome (or use a transporter that supports them), you can use async and await to simplify the code:

 async function saveData(dataArray) { const db = await idb.open('YourDB', currentVersion, upgradeFunction); const tran = await db.transaction('StoreName', 'readwrite'); const store = tran.objectStore('StoreName'); // This will add the items sequentially for(let item of dataArray) { await store.add({data:item}); } } 

Answer 2

You can use promises to load and save data asynchronously for indexed DB. Here are two sample functions for loading and saving data into a simple object in indexedDB.

Asynchronous loading from 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')); }; }; } ); } 

Asynchronous save to indexed DB:

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

Code Usage Example

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