Inserting large quantities in IndexedDB's objectstore blocks UI

Question

I want to save some ~35000 objects in my IndexedDB's objectstore. I am using below code to insert.

AddListings = function (x2j_list_new, callback) {        var transaction = db.transaction(["listings"], IDBTransaction.READ_WRITE);     var count = 0;     transaction.oncomplete = function (event) {         if (callback) {             console.log('x2jShowListing Added ' + count + '/' + x2j_list_new.length);                 callback([count, x2j_list_new.length]);             }     };     transaction.onerror = function (e) {        console.log("myError: ", e);          if (callback) {           callback(false);        }     };     var store = transaction.objectStore("listings");      $.each(x2j_list_new, function (index0, item0) {         var request = store.put(item0);         request.onsuccess = function (event) {             count++;             // event.target.result               };         });     });         }; 

The above code works fine, but looping and inserting over ~35000 objects makes the UI unresponsive for ~200 seconds. I thought maybe i can use WebWorkers, but IndexedDB is not available inside WebWorkers. I tried to find a way to bulk insert, couldn't find one. Any ideas of how to insert large quantities of objects without blocking the UI?

Answer 1

You're on the right track, but you're asking the browser to store 35,000 objects before it's had a chance to finish storing one. Here's code which asynchronously waits for one request to finish before starting the next (but using the same transaction):

    openRequest = window.indexedDB.open("MyDatabase", 1);     openRequest.onerror = function(event) {         console.error(event);     };     openRequest.onsuccess = function (event) {         var db = openRequest.result;         db.onerror = function(event) {             // Generic error handler for all errors targeted at this database's requests             console.error(event.target);             window.alert("Database error: " + event.target.wePutrrorMessage || event.target.error.name || event.target.error || event.target.errorCode);         };         var transaction = db.transaction('item', "readwrite");         var itemStore = transaction.objectStore("item");         putNext();          function putNext() {             if (i<items.length) {                 itemStore.put(items[i]).onsuccess = putNext;                 ++i;             } else {   // complete                 console.log('populate complete');                 callback();             }         }                };