JS IndexedDB Tutorial 🎯

Welcome to our comprehensive guide on JavaScript's IndexedDB! In this lesson, we'll dive deep into understanding what IndexedDB is, why we use it, and how to master it. By the end of this tutorial, you'll be able to store large amounts of data in the browser efficiently and build real-world applications. Let's get started!

Table of Contents 📝

Introduction to IndexedDB
- 1.1 What is IndexedDB?
- 1.2 Why use IndexedDB?
Setting up IndexedDB
- 2.1 Creating a Database
- 2.2 Creating an Object Store
Working with Data
- 3.1 Adding Data to the Database
- 3.2 Reading Data from the Database
- 3.3 Updating Data in the Database
- 3.4 Deleting Data from the Database
Indexing Data
- 4.1 Creating an Index
- 4.2 Querying Data using an Index
Advanced Topics
- 5.1 Transactions and Versioning
- 5.2 Error Handling
- 5.3 Batch Operations

1. Introduction to IndexedDB 📝

IndexedDB is a low-level API that allows you to store large amounts of data directly in the user's browser. It is asynchronous, meaning that it operates on event-driven callbacks.

1.1 What is IndexedDB?

IndexedDB is a client-side database that provides a way to store structured data (like JSON) in the browser. It is designed for handling large datasets, and it persists even when the user navigates away from the web page.

1.2 Why use IndexedDB?

IndexedDB is useful when dealing with large datasets that need to be accessed offline or when real-time updates are required. Examples include data-intensive applications like social media apps, note-taking apps, and e-commerce platforms.

2. Setting up IndexedDB 📝

Before we dive into working with data, let's set up our IndexedDB environment.

2.1 Creating a Database

To create a database, we use the open() method on the indexedDB global object.

javascript

const openDB = async () => {
  const dbName = 'myDatabase';
  const version = 1;
  const request = indexedDB.open(dbName, version);

  // ... (handle the open event and version change event here)
};

2.2 Creating an Object Store

Once the database is open, we can create an object store to hold our data.

javascript

const createObjectStore = (db, storeName) => {
  const objectStore = db.createObjectStore(storeName, { keyPath: 'id' });

  // ... (define indexes and other properties here)

  return objectStore;
};

3. Working with Data 📝

Now that we have our database and object store set up, let's learn how to add, read, update, and delete data.

3.1 Adding Data to the Database

To add data, we use the add() method on the object store.

javascript

const addData = (objectStore, data) => {
  const request = objectStore.add(data);

  request.onsuccess = () => {
    console.log(`Data added with ID: ${data.id}`);
  };
};

3.2 Reading Data from the Database

To read data, we use the get(), getAll(), or openCursor() methods on the object store.

javascript

const readData = (objectStore, id) => {
  const request = objectStore.get(id);

  request.onsuccess = () => {
    console.log('Data:', request.result);
  };
};

3.3 Updating Data in the Database

To update data, we first find the data using get() or openCursor(), then update it using the put() method.

javascript

const updateData = (objectStore, id, updatedData) => {
  const transaction = objectStore.transaction([id], 'readwrite');
  const object = transaction.objectStore(objectStore.name).get(id);

  object.onsuccess = () => {
    const oldData = object.result;
    oldData.fieldToUpdate = updatedData.fieldToUpdate;
    const request = transaction.objectStore(objectStore.name).put(oldData);

    request.onsuccess = () => {
      console.log('Data updated');
    };
  };
};

3.4 Deleting Data from the Database

To delete data, we use the delete() method on the object store.

javascript

const deleteData = (objectStore, id) => {
  const request = objectStore.delete(id);

  request.onsuccess = () => {
    console.log('Data deleted');
  };
};

4. Indexing Data 📝

Indexing data can significantly improve query performance. IndexedDB allows you to create indexes on any property of your data.

javascript

const createIndex = (objectStore, indexName, indexProperties) => {
  const index = objectStore.createIndex(indexName, indexProperties);
};

4.2 Querying Data using an Index

To query data using an index, we use the openCursor() method and specify the index name.

javascript

const queryData = (objectStore, indexName, filter) => {
  const request = objectStore.index(indexName).openCursor(filter);

  request.onsuccess = (event) => {
    const cursor = event.target.result;

    if (cursor) {
      console.log('Data:', cursor.value);
      cursor.continue();
    }
  };
};

5. Advanced Topics 📝

Here we'll cover transactions, versioning, error handling, and batch operations.

That's it for our JS IndexedDB tutorial! We've covered the basics and some advanced topics to help you get started. Practice and experimentation are key to mastering this powerful API. Happy coding! 🚀