CRUD Operations using IndexedDB

Table of contents

No heading

No headings in the article.

C - Create

R - Read

U - Update

D - Delete

Create a record in IndexedDB.

async function create(data) {
    return new Promise((resolve, reject) => {
        // create indexedDB instance
        const indexedDB = window.indexedDB;

        // If instance not found throw error
        if(!indexedDB){
            reject("Error");
        }

        // open indexedDB request
        const request = indexedDB.open("TEST", 1); // DB NAME, VERSION

        // If error occured then throw error
        request.onError = function(error) { 
            reject("Error: ", error);
        }

        // If any upgrade needed it will run this code block e.g. change in version, change in structure of object
        request.onupgradeneeded = function(request) {
            const db = request?.result;
            const store = db.createOjectStore("TEST_STORE", { keyPath: "id", autoIncrement: true });
            // store.createIndex("<index name>", "<property name>", { unique: false});
        }

        request.onsuccess = function(){
            // get a db instance;
            const db = request.result;
            // create transaction instance
            const txn = db.transaction("TEST_STORE", "readwrite");
            // create store instance
            const store = txn.objectStore("TEST_STORE");
            // add/update data to store
            store.put({...data});
            txn.oncomplete = function(){
                db.close();
                resolve("success);
            }
        }
    })
}

DELETE

async function create(id) {
    return new Promise((resolve, reject) => {
        // create indexedDB instance
        const indexedDB = window.indexedDB;

        // If instance not found throw error
        if(!indexedDB){
            reject("Error");
        }

        // open indexedDB request
        const request = indexedDB.open("TEST", 1); // DB NAME, VERSION

        // If error occured then throw error
        request.onError = function(error) { 
            reject("Error: ", error);
        }

        // If any upgrade needed it will run this code block e.g. change in version, change in structure of object
        request.onupgradeneeded = function(request) {
            const db = request?.result;
            const store = db.createOjectStore("TEST_STORE", { keyPath: "id", autoIncrement: true });
            // store.createIndex("<index name>", "<property name>", { unique: false});
        }

        request.onsuccess = function(){
            // get a db instance;
            const db = request.result;
            // create transaction instance
            const txn = db.transaction("TEST_STORE", "readwrite");
            // create store instance
            const store = txn.objectStore("TEST_STORE");
            // delete all/ delete specific record from store
            if(id){
                store.delete(id);
            } else {
                store.clear();
            }
            txn.oncomplete = function(){
                db.close();
                resolve("success);
            }
        }
    })
}

READ:

async function create(id) {
    return new Promise((resolve, reject) => {
        // create indexedDB instance
        const indexedDB = window.indexedDB;

        // If instance not found throw error
        if(!indexedDB){
            reject("Error");
        }

        // open indexedDB request
        const request = indexedDB.open("TEST", 1); // DB NAME, VERSION

        // If error occured then throw error
        request.onError = function(error) { 
            reject("Error: ", error);
        }

        // If any upgrade needed it will run this code block e.g. change in version, change in structure of object
        request.onupgradeneeded = function(request) {
            const db = request?.result;
            const store = db.createOjectStore("TEST_STORE", { keyPath: "id", autoIncrement: true });
            // store.createIndex("<index name>", "<property name>", { unique: false});
        }

        request.onsuccess = function(){
            // get a db instance;
            const db = request.result;
            // create transaction instance
            const txn = db.transaction("TEST_STORE", "readwrite");
            // create store instance
            const store = txn.objectStore("TEST_STORE");
            // read all/ specific record from store
            let query;
            if (id) {
                query = store.get(id);
            } else {
                query = store.getAll();
            }
            query.onsucess = function() {
                 resolve(data: query.result);
            }
            txn.oncomplete = function(){
                db.close();
            }
        }
    })
}