Using IndexedDB in JavaScript

IndexedDB is a powerful client-side storage API for storing large amounts of structured data in web browsers. It is designed for offline-capable web applications and can store complex data types like objects, arrays, and even files. Unlike localStorage, IndexedDB supports transactions, indexing, and asynchronous operations, making it suitable for more advanced data management.

This guide will walk you through setting up and using IndexedDB with the help of the idb library, which simplifies the native IndexedDB API.

Prerequisites

To follow this guide, you’ll need:

Basic knowledge of JavaScript and asynchronous programming.
The idb library, which provides a promise-based wrapper around IndexedDB. You can install it via npm: npm install idb or include it via CDN.

Setting Up IndexedDB

1. Include the `idb` Library

First, include the idb library in your project. For a web page, you can add it via a script tag:

<script src="https://unpkg.com/idb@7/build/umd.js"></script>

Or, if using a module system:

import { openDB } from 'idb';

2. Create a Helper File (`utility.js`)

To keep your code organized and reusable, create a utility file that handles database initialization and common operations. This file will open the database and provide functions for writing data.

// utility.js
// Open the database with version 1
const dbPromise = idb.open('posts-store', 1, function (upgradeDb) {
  // Create an object store if it doesn't exist
  if (!upgradeDb.objectStoreNames.contains('posts')) {
    upgradeDb.createObjectStore('posts', { keyPath: 'id' });
  }
});

// Function to write data to a specified object store
function writeData(storeName, data) {
  return dbPromise
    .then(function (db) {
      // Start a readwrite transaction
      const tx = db.transaction(storeName, 'readwrite');
      const store = tx.objectStore(storeName);
      // Put the data (insert or update)
      store.put(data);
      // Return the transaction's completion promise
      return tx.done;
    });
}

// Function to read all data from a specified object store
function readAllData(storeName) {
  return dbPromise
    .then(function (db) {
      const tx = db.transaction(storeName, 'readonly');
      const store = tx.objectStore(storeName);
      return store.getAll();
    });
}

// Function to clear all data from a specified object store
function clearAllData(storeName) {
  return dbPromise
    .then(function (db) {
      const tx = db.transaction(storeName, 'readwrite');
      const store = tx.objectStore(storeName);
      store.clear();
      return tx.done;
    });
}

// Export functions if using modules
// export { writeData, readAllData, clearAllData };

Explanation:

idb.open() creates or opens a database named ‘posts-store’ with version 1. The upgrade callback runs if the database needs to be created or upgraded.
createObjectStore('posts', { keyPath: 'id' }) creates an object store named ‘posts’ with ‘id’ as the key path. This means each stored object must have an ‘id’ property.
writeData() performs a transaction to insert or update data in the store.
Additional helper functions like readAllData() and clearAllData() are included for completeness.

3. Data Structure

IndexedDB stores JavaScript objects. Ensure your data includes the key path property (e.g., ‘id’).

Example data structure:

const sampleData = {
  id: 1,
  title: "Sample Post",
  content: "This is a sample post content.",
  author: "John Doe"
};

To store this data:

writeData('posts', sampleData)
  .then(() => {
    console.log('Data written successfully');
  })
  .catch(error => {
    console.error('Error writing data:', error);
  });

4. Integrating with Service Workers

Service Workers can use IndexedDB to cache data for offline use. Here’s an example of fetching data from an API and storing it in IndexedDB within a Service Worker.

// sw.js (Service Worker file)
importScripts('utility.js'); // Include the utility file

self.addEventListener('fetch', function (event) {
  // Only handle GET requests
  if (event.request.method !== 'GET') return;

  const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  if (event.request.url.includes(apiUrl)) {
    event.respondWith(
      fetch(event.request)
        .then(function (response) {
          // Clone the response for caching
          const clonedResponse = response.clone();
          
          // Parse and store the data
          clonedResponse.json()
            .then(function (data) {
              console.log('Fetched data:', data);
              // Assuming data is an object with posts
              for (const key in data) {
                writeData('posts', data[key]);
              }
            })
            .catch(error => {
              console.error('Error parsing response:', error);
            });
          
          // Return the original response
          return response;
        })
        .catch(function () {
          // If fetch fails, try to serve from IndexedDB
          return readAllData('posts')
            .then(function (storedPosts) {
              // Create a synthetic response with stored data
              const response = new Response(JSON.stringify(storedPosts), {
                headers: { 'Content-Type': 'application/json' }
              });
              return response;
            });
        })
    );
  }
});

Explanation:

The Service Worker intercepts fetch requests to the API URL.
It fetches the data, clones the response, and stores the parsed JSON in IndexedDB.
If the fetch fails (e.g., offline), it falls back to serving cached data from IndexedDB.

Best Practices

Error Handling: Always wrap IndexedDB operations in try-catch or use .catch() on promises.
Transactions: Use transactions to ensure data integrity. Avoid long-running transactions.
Versioning: Increment the database version when changing the schema (e.g., adding indexes).
Performance: IndexedDB is asynchronous, so operations won’t block the UI. Use indexes for faster queries.
Storage Limits: Browsers limit IndexedDB storage (typically 50MB-1GB), so monitor usage.
Security: IndexedDB data is stored locally and is not sent to servers, but be cautious with sensitive data.

Resources

This guide provides a solid foundation for using IndexedDB in your web applications. Experiment with the code and adapt it to your specific needs!