Image that you want to manage a Twitter-like timeline using a socket connection in order to receive the posts created one at a time. You want to display the received posts but you want also stored it and remove the oldest post archived. A database is the best solution for this and, in fact, the modern browsers provide us a database, called IndexedDB, and even if it has a bad reputation we will try to understand better what it is and how to use it to improve the cache of our applications

What is IndexedDB?

IndexedDB is a JavaScript-based object-oriented database.

But, to enter the technicalities, IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. His API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB lets you store and retrieve objects that are indexed with a key, any objects supported by the structured clone algorithm can be stored.

With IndexedDB you can have multiple databases with whatever name you give them (generally you’ll only have one database per app). Every database can contain multiple objects stores, like notifications, posts etc. Every objects store can contain multiple values that can be Javascript objects, strings, arrays, dates, etc… Every item inside the object’s store can have a primary key.

All read or write operations in an IndexedDB must be part of a transaction, this means that if you create a transaction for a series of steps and on of this fail, none of them are applied.

The browser support is good as well with every major browser supporting it.