JavaScript · Intermediate level

Intermediate level · Module 4: Browser Storage and Robust Forms · Lesson 3 of 3

IndexedDB for Larger Offline Data

Know when Web Storage is not enough and store larger, structured data in IndexedDB.

In this lesson you will

  • Explain when to use IndexedDB instead of localStorage
  • Store and read records in IndexedDB

Key concepts

IndexedDBobject storetransactionswrapper libraries

The lesson

localStorage is synchronous, small and string-only. IndexedDB is an asynchronous database in the browser that stores structured objects and much larger amounts of data, which suits offline apps such as data-collection forms used in the field.

Data lives in object stores inside a database, and every read or write happens in a transaction. The raw API is event-based and verbose, so many projects use a small promise-based wrapper library.

Plan for versions: when your data structure changes, an upgrade step migrates existing data. Test what happens when a user returns after a long time with old data.

Step by step

  1. Open a database with an object store for survey responses.
  2. Add records in a transaction.
  3. Read all records back and display them.
  4. Discuss when this app should sync the records to a server.

Practice activity

Store offline survey responses in IndexedDB and list them, ready to be synchronised later.

Expected result: Responses survive reloads and browser restarts and are listed correctly.

Check your understanding

  1. Name two advantages of IndexedDB over localStorage.

    Show answer

    It stores structured objects and much larger amounts of data, asynchronously.

  2. What wraps every IndexedDB read or write?

    Show answer

    A transaction.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.