Gain insights into building scalable web applications with IndexedDB. Learn database management, object stores, and advanced data optimization through a hands-on to-do list project.

In this course, you will learn about IndexedDB, a powerful web-based storage system essential for building efficient and scalable web applications that require client-side storage. 

You will start this course by understanding the basics of IndexedDB, including accessing and connecting to databases, managing database versions, and performing fundamental operations such as listing and deleting databases. Next, you’ll explore the core concepts of object stores and transactions. You’ll learn how to create object stores and store and retrieve data from these stores. You’ll then progress to advanced topics, exploring indexes and cursors, understanding their creation and usage, and honing your skills in optimizing data access. You’ll end the course by creating a to-do list project using the concepts learned.

By the end of this course, you will possess the knowledge and skills to work proficiently with IndexedDB, opening up new possibilities for your web development projects.

Building a Web Application with JavaScript and IndexedDB

<html>
 <head>
 </head>
 <body>
  <div id="content" style="height:400px;display:flex; flex-direction:column; justify-content: space-between;">
      <h2>Press init database before any operation</h2>
    <div>
        <button id="init_db">Init database and object store</button>
    </div>

    <div>
        <button id="add_emp_data">Add dummy employee data</button>
    </div>

    <div>
        <input placeholder="Employee id" id="show_emp_id_input"/>
        <button id="show_emp_data">Show employee data</button>
    </div>

    <div>
        <input placeholder="Employee id to be updated" id="update_emp_id_input"/>
        <input placeholder="New employee name" id="update_emp_name"/>

        <button id="update_employee">Update employee name</button>
    </div>

    <div>
        <input placeholder="Employee id to be deleted" id="delete_emp_id_input"/>
        <button id="delete_employee">Delete employee data</button>
    </div>
  </div>
 </body>
</html>

//  Task 1
let initDatabase = document.getElementById('init_db');
let companyDatabaseObj; 
initDatabase.onclick = (ev) =>{

    let openDBRequest = indexedDB.open("Company", 1);
    openDBRequest.onsuccess = (ev) =>{
        companyDatabaseObj = openDBRequest.result;  // Here we have opened the database successfully
        console.log("Company database already present. A connection is created to the database");
    };

    openDBRequest.onupgradeneeded  = (ev) =>{
        console.log("Creating Employee Object Store");
        companyDatabaseObj = openDBRequest.result;
        let employeeStore = companyDatabaseObj.createObjectStore("Employee", {keyPath: "id"});
        console.log("Employee ObjectStore created");
    }
};

//  Task 2: Add dummy employee data
let addEmployeeDataBtn = document.getElementById('add_emp_data');
addEmployeeDataBtn.onclick = (ev) =>{
    addDummyData();
};

// Functions related to task 2 start here

async function addDummyData() {

    // Create the transaction for the Employee store in the write mode
    let transaction =companyDatabaseObj.transaction(['Employee'], 'readwrite');

    let employeeStore = transaction.objectStore('Employee');

    let data = [
        {id: "1", name: "user 1"},
        {id: "2", name: "user 2"},
        {id: "3", name: "user 3"},
        {id: "4", name: "user 4"}
    ];
    for(let i = 0; i < data.length; i++) {
        let addedData = await addData(employeeStore, data[i]);
        console.log("Added Data:", addedData);
    }
}

function addData(store, data) {
    return new Promise((resolve, reject)=>{
        let addRequest = store.add(data);
        addRequest.onsuccess = (ev) =>{
            resolve(addRequest.result);
        }
        addRequest.onerror = (ev) =>{
            resolve(addRequest.error.message);
        }
    });
}
// Functions related to task 2 end here

//  Task 3: Show employee data
let showEmployeeDataBtn = document.getElementById('show_emp_data');
showEmployeeDataBtn.onclick = (ev) =>{
    let employeeId = document.getElementById('show_emp_id_input').value;
    if(employeeId) {
        getData(employeeId);
    }   
};

// Functions related to task 3 end here 
function getData(employeeId) {
    let transaction =companyDatabaseObj.transaction(['Employee'], 'readonly');
    let employeeStore = transaction.objectStore('Employee');
    let getRequest = employeeStore.get(employeeId);
    getRequest.onsuccess = (ev) =>{
        console.log("Requested data is :", getRequest.result);
    }
}
// Functions related to task 3 end  here


//  Task 4
let updateEmployeeDataBtn = document.getElementById('update_employee');
updateEmployeeDataBtn.onclick = (ev) =>{
    let employeeId = document.getElementById('update_emp_id_input').value;
    let newEmployeeName = document.getElementById('update_emp_name').value;
    if(employeeId && newEmployeeName) {
        updateData(employeeId, newEmployeeName);
    }   
};

// Functions related to task 4 start here

function updateData(employeeId, name) {

    let transaction =companyDatabaseObj.transaction(['Employee'], 'readwrite');
    let employeeStore = transaction.objectStore('Employee');
    let getRequest = employeeStore.get(employeeId);

    getRequest.onsuccess = (ev) =>{

        let data = getRequest.result;
        console.log("The data before update: ", data);
        
        // Set the new name
        data.name = name;

        // Update the data 
        let updateRequest = employeeStore.put(data); 
        updateRequest.onsuccess = function() {
            console.log("Updated the data for key ", updateRequest.result);
            console.log("The data after update : ", data);
        };

    }
}
// Functions related to task 4 end here


//  Task 5
let deleteEmployeeDataBtn = document.getElementById('delete_employee');
deleteEmployeeDataBtn.onclick = (ev) =>{
    let employeeId = document.getElementById('delete_emp_id_input').value;
    if(employeeId) {
        deleteData(employeeId);
    }   
};

// Functions related to task 5 start here
function deleteData(employeeId) {
    let transaction =companyDatabaseObj.transaction(['Employee'], 'readwrite');
    let employeeStore = transaction.objectStore('Employee');
    let deleteRequest = employeeStore.delete(employeeId);
    deleteRequest.onsuccess = (ev) =>{
        console.log("Employee deleted successfully");
    }
}
// Functions related to task 5 end here


codemirror

console

Review the solution for the IndexedDB challenge on handling employee details.

Introduction to IndexedDB

Object Store and Transaction

Index and Cursor

To-Do List Project

Conclusion

Solution Review: Handling Employee Details

Solution

Code explanation