Science Knowings: JavaScript Course For Social Media


From Service Workers to IndexedDB

In the previous session, we explored Service Workers, a powerful technology for enhancing web app functionality. Today, we'll dive into IndexedDB, a key-value store API for storing structured data in the browser.

What is IndexedDB?

IndexedDB is a low-level API for persistent data storage in the browser. It allows web apps to store and retrieve large amounts of data, even when the user is offline.

Why IndexedDB?

  • IndexedDB offers several advantages over other storage mechanisms like localStorage and sessionStorage:
  • Persistent data: Data is stored permanently and persists across browser sessions
  • Large storage capacity: IndexedDB supports storing up to 50MB of data
  • Structured data: Data is organized in a hierarchical structure, making it easier to query and manipulate

Benefits of Using IndexedDB

  • Offline data access: IndexedDB enables web apps to store and retrieve data offline, providing a seamless user experience.
  • Enhanced performance: Storing data locally reduces network requests, resulting in faster page load times and improved responsiveness.
  • Scalability: IndexedDB can handle large datasets efficiently, making it suitable for data-intensive applications.

Use Cases for IndexedDB

  • Caching user data: Store user preferences, login credentials, and other frequently accessed data locally.
  • Offline data management: Enable users to access data when offline or when network connectivity is limited.
  • Complex data structures: Store hierarchical or complex data structures that are difficult to represent using other storage mechanisms.

IndexedDB Objects

  • IndexedDB uses several key objects:
  • IDBDatabase: Represents the database connection.
  • IDBTransaction: Represents a transaction, a unit of work that can perform multiple operations on the database.
  • IDBObjectStore: Represents a collection of data items.
  • IDBIndex: Enables faster data retrieval based on specific criteria.


The IDBDatabase object provides access to the database and its associated objects.
Methods to open, close, and delete the database: open(), close(), deleteDatabase().


The IDBTransaction object manages a set of operations on the database.
Methods to commit or abort the transaction: commit(), abort().


The IDBObjectStore object represents a collection of data items.
Methods to add, get, update, and delete data: put(), get(), getAll(), delete().


The IDBIndex object provides a way to efficiently retrieve data based on a specific criteria.
Method to get the index: createIndex().


The IDBCursor object iterates over the data in an IDBObjectStore or IDBIndex.
Methods to move through the data: next(), prev(), first(), last().

IndexedDB Methods

  • IndexedDB provides several important methods:
  • open(): Opens a database.
  • put(): Adds or updates a data item.
  • get(): Retrieves a data item.
  • getAll(): Retrieves all data items in an object store.

IndexedDB Methods (Continued)

  • delete(): Deletes a data item.
  • clear(): Deletes all data items in an object store.
  • createIndex(): Creates an index on an object store.

Next Topic: WebSockets

In the next session, we'll explore WebSockets, a technology for bi-directional communication between a web client and server. Follow us to learn how to add real-time functionality to your web apps!