IndexedDB in HTML

IndexedDB is a powerful client-side storage technology used in web applications. It allows developers to store large amounts of structured data, including files and blobs. This guide provides a beginner-friendly summary of IndexedDB, its key concepts, and a simple example.

Key Concepts

• What is IndexedDB?
  • A low-level API for client-side storage of significant amounts of structured data.
  • Supports transactions, allowing data to be stored and retrieved efficiently.
• Key Features
  • Asynchronous: Operations do not block the user interface, providing a smooth user experience.
  • NoSQL Database: Stores data in a more flexible manner compared to traditional SQL databases.
  • Key-Value Store: Data is stored as key-value pairs, where each key is unique.
• Data Types Supported
  • Strings
  • Numbers
  • Dates
  • Arrays
  • Binary data (Blobs)

Basic Operations

IndexedDB allows for several key operations:

• Creating a Database: Initialize a new database or open an existing one.
• Creating Object Stores: Similar to tables in SQL, these stores hold the actual data.
• Adding Data: Insert new records into an object store.
• Retrieving Data: Query and retrieve stored data.
• Updating Data: Modify existing records in an object store.
• Deleting Data: Remove records from the database.

Example of IndexedDB Usage

Here’s a simple example demonstrating how to use IndexedDB:

// Open (or create) a database
let request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    // Create an object store
    let objectStore = db.createObjectStore("myStore", { keyPath: "id" });
};

request.onsuccess = function(event) {
    let db = event.target.result;
    // Start a transaction
    let transaction = db.transaction("myStore", "readwrite");
    let objectStore = transaction.objectStore("myStore");

    // Add data
    let item = { id: 1, name: "John Doe" };
    objectStore.add(item);
};

request.onerror = function(event) {
    console.error("Database error: ", event.target.error);
};

Conclusion

IndexedDB is an essential tool for web developers who need to manage large amounts of data on the client side. Its asynchronous nature and flexible storage capabilities make it suitable for modern web applications. By understanding the basic operations and structure of IndexedDB, developers can create more efficient and user-friendly web applications.