JSFiddle - React, Tailwind, and code Playground

by Jonathan Smith

HTML

<button onclick="addData()">Add Products</button>
<button onclick="getData()">Get Products</button>

JavaScript

// BASIC IDB EXAMPLE
var db;
var request = indexedDB.open("MyTestDatabase");
request.onerror = function (event) {
    alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function (event) {
    db = event.target.result;
};
request.onupgradeneeded = function (event) {
    var db = event.target.result;

    // Create an objectStore for this database
    var objectStore = db.createObjectStore("products", {
        keyPath: "productId"
    });
    alert('database ready');
};

function addData() {
    productData = [{
        productId: "444-44-4444",
        name: "Red widget"
    }, {
        productId: "555-55-5555",
        name: "Blue widget"
    }, {
        productId: "666666",
        name: "Green widget"
    }, {
        productId: "777777",
        name: "Pink widget"
    }, {
        productId: "8888888",
        name: "Yellow widget"
    }];
    var transaction = db.transaction(["products"], "readwrite");
    var productObjectStore = transaction.objectStore("products");
    for (var i in productData) {
        productObjectStore.add(productData[i]);
    }

    transaction.oncomplete = function () {
        alert('products added');
    }
}

function getData() {
    var products = [];
    var transaction = db.transaction(["products"], "readonly");
    var productObjectStore = transaction.objectStore("products");
    productObjectStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            products.push(cursor.value.name);
            cursor.
            continue ();
        } else {
            console.log(products);
        }
    };
}