Beyond LocalStorage: An Introductory Guide to IndexedDB

I recently worked on a project where we had to migrate away from localStorage to IndexedDB. The main reason was the limited storage limits available for localStorage. This enterprise application was being built by multiple teams and while each team was careful in not exceeding this limit on their own, the combined usage of these resources put the site over the limit (note: this limit is per origin) causing issues. While localStorage provides straightforward key-value storage, IndexedDB offers more power, flexibility and most notably, a lot more storage. While most browsers typically set localStorage quota to around 5 to 10 MB, IndexedDB limits are much higher. Chromium-based browsers (like Edge) allow up to 80% of the disk space for a system that has more than 375GB, about 70% for 128GB, and around 60% for less than 80GB. Safari and Firefox have different limits but are generally in the GB range, much higher than 10 MB.

What is IndexedDB?

IndexedDB is a transactional database system, similar to SQL-based RDBMS. However, instead of using tables with rows and columns, it uses object stores to hold information. Think of it as a way to store and retrieve objects in a client’s browser. This feature is beneficial for offline applications or for storing large amounts of data without a round-trip to a server.

Key Features

1. Key-Value Store: At its core, IndexedDB is a key-value store.
2. Schemaless: Unlike SQL databases, IndexedDB is schemaless. This means you don’t have to define a strict schema upfront.
3. Asynchronous: Operations don’t block the application, ensuring a smooth user experience.
4. Transactions: Ensure data integrity, even when handling multiple operations.
5. Indexing: Efficiently search data using indexes.

Getting Started with IndexedDB

To start with IndexedDB, you’d typically follow these steps:

Open a database: This process involves specifying the database’s name and version. If the database doesn’t exist, it’s created for you.

let openRequest = indexedDB.open("myDatabase", 1);

Create an object store: This is similar to creating a table in SQL. This step usually occurs during the upgradeneeded event.

openRequest.onupgradeneeded = function(e) {
    let db = e.target.result;
    if (!db.objectStoreNames.contains('myStore')) {
        db.createObjectStore('myStore', {keyPath: 'id'});
    }
};

CRUD Operations: Once your object store is ready, you can perform CRUD operations:

Add data: store.add({id: 1, name: "Sample"})
Read data: store.get(1)
Update data: store.put({id: 1, name: "Updated Sample"})
Delete data: store.delete(1)

Use Cases

Offline capabilities: With IndexedDB, web apps can work offline, storing data locally and syncing with the server once the connection is reestablished.

Large datasets: IndexedDB is suitable for applications dealing with large datasets that need client-side storage and efficient indexing.

Web games: Store game assets and save game states without a server round trip.

Limitations and Concerns

Browser Support: While modern browsers support IndexedDB, always check for compatibility, especially if supporting legacy browsers.

Complexity: IndexedDB is more complex than other client-side storage solutions. For many applications, the simpler localStorage might suffice.

Size limits: Although generous, each browser may have its storage limits. Always ensure to handle “QuotaExceededError” when working with large data.

Conclusion

IndexedDB is a robust and flexible storage solution for web developers looking to enhance their application’s client-side storage capabilities. With its asynchronous operations, indexing, and transactional nature, it offers an excellent alternative to traditional relational databases. However, ensure you understand its complexities and browser-specific nuances to make the most out of this powerful tool.