Using IndexedDB and localForage for Client‑Side Storage in Frontend Development

Introduction

Client‑side storage has long relied on cookies and Web Storage (sessionStorage, localStorage), which have limitations such as small capacity (max 5 MB) and the need for serialization. IndexedDB offers larger, asynchronous storage but is complex to use.

Third‑party library localForage abstracts IndexedDB, providing a simple API with automatic fallback to WebSQL or localStorage, making large‑scale offline storage easy.

What is IndexedDB?

IndexedDB is a low‑level API for storing large amounts of structured data, including binary blobs, directly in the browser. It is object‑oriented, supports key‑based indexing, and stores any object that the structured clone algorithm can handle.

Convenient Access

Unlike Web Storage, IndexedDB stores objects without manual serialization, allowing direct storage and retrieval of complex data structures.

Asynchronous Operations

All reads and writes are asynchronous, preventing UI blocking even with large data sets.

Huge Capacity

Typical limits are around 500 MB and can be effectively unlimited, far exceeding localStorage.

What is localForage?

localForage is a wrapper around IndexedDB that simplifies its usage and provides graceful degradation: if IndexedDB is unavailable it falls back to WebSQL, then to localStorage, supporting all major browsers.

Using localForage

Install the library.

import localforage from 'localforage'

Create an IndexedDB instance.

const myIndexedDB = localforage.createInstance({
  name: 'myIndexedDB',
});

Store a value.

myIndexedDB.setItem(key, value)

Retrieve a value (async).

myIndexedDB.getItem('somekey').then(value => {
  // we got our value
}).catch(err => {
  // handle error
});
// or with async/await
try {
  const value = await myIndexedDB.getItem('somekey');
  console.log(value);
} catch (err) {
  console.log(err);
}

Remove an item.

myIndexedDB.removeItem('somekey')

Clear the database.

myIndexedDB.clear()

Managing localForage with Pinia in Vue

Define a Pinia store that creates multiple localForage instances (filesDB, usersDB, responseDB) and provides async actions for setting values.

// store/indexedDB.ts
import { defineStore } from 'pinia'
import localforage from 'localforage'

export const useIndexedDBStore = defineStore('indexedDB', {
  state: () => ({
    filesDB: localforage.createInstance({ name: 'filesDB' }),
    usersDB: localforage.createInstance({ name: 'usersDB' }),
    responseDB: localforage.createInstance({ name: 'responseDB' }),
  }),
  actions: {
    async setfilesDB(key: string, value: any) {
      this.filesDB.setItem(key, value)
    },
  },
})

Use the store in components to set data:

import { useIndexedDBStore } from '@/store/indexedDB'
const indexedDBStore = useIndexedDBStore()
const file1 = { a: 'hello' }
indexedDBStore.setfilesDB('file1', file1)

Conclusion: localForage simplifies IndexedDB usage, offering large, asynchronous, and compatible client‑side storage for modern web applications.