Originally published on Medium

Omage 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 canhave 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.

https://miro.medium.com/max/2000/1*Dcm7gAWdHURWLJfHJTrg_A.png

Why IndexedDB have a bad reputation?

The bad reputation comes from the fact that the API is a little bit horrid, for this advice I recommend the use of IndexedDB Promised a tiny library that mirrors IndexedDB, but replaces the weird IDBRequest objects with promises.


Base IndexedDB interactions

Using indexedDB is really very simple, especially with the library that I have recommended, let’s see together how to create and exploit a database connection.

Open a connection

The open connection want 3 parameters • The DB Name • The DB Version • A callback that returns the upgradeDB parameter. This is the only place where you can create and remove objects stores and indexes.

import idb from 'idb'

idb.open('test-db', 1, upgradeDB => {  
	//To create a simple key value object store  
	**var keyValStore = upgradeDB.createObjectStore('keyval')**    
	//To create a store with objects   
	**var objectStore = upgradeDB.createObjectStore('people',{ keyPath: 'name'})**
})

Read and Write on an Object Store

To read and write on an Object Store we need to create a transaction, to do this we just need to use the db.transaction API provided us, get the object store and use the put or get