Inserting large quantities in IndexedDB's objectstore blocks UI
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();
}
}
};