Properly initializing an IndexedDB object store

Question

I am trying to use indexedDB to store some data client side and I am having trouble properly setting up the database.

I am following the tutorial here

The onupgradeneeded() event is being fired when I install the extension for the first time, but for some reason, none of the events associated with the object store transaction are being fired and I can't find any documentation that addresses this issue.

This is the relevant code:

const db_name="Tags";


var request = window.indexedDB.open(db_name, 1);
var tags  = [
    //codes: 0 - markdown wrap tag
    //       1 - HTML wrap tag 
    //       2 - single tag
    { domain: "www.youtube.com", 
      
      bold:["*",0],
      strikethrough:["-",0],
      italic:["_",0] 
    },
    
    
    { domain: "www.stackoverflow.com", 
      
      bold:["<strong>",1], 
      italic:["<em>",1],
      strikethrough:["<del>",1],
      superscript:["<sup>",1],
      subscript:["<sub>",1],
      heading1:["<h1>",1],
      heading2:["<h2>",1],
      heading3:["<h3>",1],
      blockquote:["<blockquote>",1],
      code:["<code>",1],
      newline:["<br>",2],
      horizontal:["<hr>",2]
    }
];


request.onerror = function(event) {
  alert("Error opening the database");
};

request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("domains", {keyPath: "domain" });
    objectStore.createIndex("domain", "domain", { unique: true });
    alert("I'm trying to do stuff"); 
    objectStore.transaction.oncomplete = function(event) {
        var domanStore=db.transaction("domains","readwrite").objectStore("domains");
        for(var i in tags)
        {
            domainStore.add(tags[i]);
            alert("added " + tags[i]["domain"] + " to the DB");
        }
        alert("I might have done stuff");
    };
    objectStore.transaction.onerror = function(event) {
        alert("Transaction error");
    };
    objectStore.transaction.onabort = function(event){
        alert("Transaction aborted");
    };



    db.onerror=function(event){
        alert("DB ERROR bubbled up");
    };
    alert("I thought I did something");
};

The only alert boxes that pop up are for

I'm trying to do stuff.

and

I thought I did something.

The console shows no errors.

The only thing I can think of is that I'm not creating the object store correctly, but I can't see what I'm doing wrong here.

Some other helpful sources:

• IDBObjectStore

• IDBTransaction

Answer 1

You can use something like this-

const db_name="Tags";


var request = window.indexedDB.open(db_name, 1);
var tags  = [
    //codes: 0 - markdown wrap tag
    //       1 - HTML wrap tag 
    //       2 - single tag
    { domain: "www.youtube.com", 

      bold:["*",0],
      strikethrough:["-",0],
      italic:["_",0] 
    },


    { domain: "www.stackoverflow.com", 

      bold:["<strong>",1], 
      italic:["<em>",1],
      strikethrough:["<del>",1],
      superscript:["<sup>",1],
      subscript:["<sub>",1],
      heading1:["<h1>",1],
      heading2:["<h2>",1],
      heading3:["<h3>",1],
      blockquote:["<blockquote>",1],
      code:["<code>",1],
      newline:["<br>",2],
      horizontal:["<hr>",2]
    }
];


request.onerror = function(event) {
  alert("Error opening the database");
};

request.onupgradeneeded = function(event) 
{
   var db = event.target.result;
   var objectStore = db.createObjectStore("domains", {keyPath: "domain" });
   objectStore.createIndex("domain", "domain", { unique: true });
   alert("I'm trying to do stuff"); 
   for(var i in tags)
   {
       objectStore.add(tags[i]);
       alert("added " + tags[i]["domain"] + " to the DB");
   }
   alert("I might have done stuff");

   alert("I thought I did something");
};

Since you are populating the data at time of creation of the objectStore you don't have to create a transaction in onupgradeneeded function, outside of this function you have to create transaction