JSFiddle - React, Tailwind, and code Playground

JavaScript

(function () {

    var db, idb = window.indexedDB;

    var dbOpenRequest = idb.open("test", "1.0");
    
      dbOpenRequest.onupgradeneeded = function(event) {
        db = event.target.result;
          
        setUpDatabase(db);
      };
    
    dbOpenRequest.onsuccess = function (ev) {
        db = ev.target.result;
            
        window.setTimeout(getSomeValue, 1000);
    };

    function setUpDatabase(ev) {
        var x, store;

        for (x = 0; x < db.objectStoreNames.length; x += 1) {
            db.deleteObjectStore(db.objectStoreNames[x]);
        }

        var store = db.createObjectStore("test", {
            keyPath: 'doc.webKit'
        });

        store.add({ moz: 1, doc: { webKit: 3, name: 'webkit!'  }});
        store.add({ moz: 3, doc: { webKit: 1, name: 'mozilla!' }});

        // Wait for the setVersion transaction to end...
        // This is an example. Typically control would return to the
        // event loop after this point.
        window.setTimeout(getSomeValue, 1000);
    };

    function getSomeValue() {
        db.transaction("test").objectStore("test").get(3).onsuccess = showValue;
    }

    function showValue(ev) {
        var value = ev.target.result.doc;
        alert('name: ' + value.name);
        // Don't forget to close your connections!
        //db.close();
    }

}());