javascriptreactjsstoring-data

react.js indexDB large data store.put performance issues


I have an array of objects that can have millions of rows. I am trying to store it in indexDB and I can do this successfully but it has some performance issues on the "put" method. The reason is because I am having to loop over every index and put it in indexDB individually. Is there a way to simply dump the entire array in here? here is my code...

    var indexDB;
    indexDB = window.indexedDB; 
    var open = indexedDB.open("HistoricalDB");
    open.onupgradeneeded = function(){
    let db = open.result;
    let store = db.createObjectStore("HistoricalTable", {keyPath: "id"});
    let index = store.createIndex("CIndex", ["time", "value"]);
    };
    open.onsuccess = function(){
        let db = open.result;
        let tx = db.transaction("HistoricalTable", "readwrite");
        let store = tx.objectStore("HistoricalTable");
        let index = store.index("CIndex");
        for (let i=0; i<allHistoricalData.length-1; i++){
            store.put(allHistoricalData[i]);
        }
        let getAll = store.getAll();
        getAll.onsuccess = function(){
            console.log(getAll.result)
        }
        tx.oncomplete = function(){
            db.close();
        };
    }

Here is what is killing me....

        for (let i=0; i<allHistoricalData.length-1; i++){
            store.put(allHistoricalData[i]);
        }

Is there a way to do store.put(allHistoricalData) instead of store.put(allHistoricalData[i] in a loop?


Solution

  • IndexDB can store any kind of javascript clonable data, so you should be able to simply store you array as a whole.

    I see you are creating an index and using that to store the values. IndexDB indexes are used to look up data in a store but should not be used to stored data itself.

    What you want to do is put data directly in the store like so:

    var open = window.indexedDB.open('HistoricalDB');
    
    open.onupgradeneeded = function () {
      let db = open.result;
      db.createObjectStore('HistoricalTable');
    };
    
    open.onsuccess = function () {
      let db = open.result;
      let tx = db.transaction('HistoricalTable', 'readwrite');
      let store = tx.objectStore('HistoricalTable');
      let request = store.put(allHistoricalData, 'DATA');
    
      request.onsuccess = function () {
        console.log('success!');
      };
      request.onerror = function () {
        console.log(request.error);
      };
    };