Background Story

People often say that curiosity killed the cat and that necessity is the mother of all inventions. However, I believe these sayings are not fully appreciated. While developing my portfolio website, I embarked on a journey to explore a novel method for storing user preferences as they navigate the site, particularly focusing on the choice between a dark or light theme.

Traditionally, I would resort to using cookies or local storage to achieve this. But as I delved deeper into Chrome's 'Developer Tools,' something previously unnoticed in the 'Application' section caught my attention: **IndexedDB**.

What is IndexedDB?

According to Mozilla, IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While localStorage and sessionStorage are limited to 10 MiB of data maximum on all browsers, IndexedDB can store up to 50MiB in FireFox and Google Chrome up to 50% of available disk space.

To use IndexedDB, you need to open a database, create an object store in the database, start a transaction and make a request to do some database operation, like adding or retrieving data. You also need to handle the events on the request object to get the results.

IndexedDB is a NoSQL database, which means that it does not use fixed-column tables like SQL-based RDBMSes. Instead, it stores and retrieves objects that are indexed with a key. Any objects supported by the structured clone algorithm can be stored in IndexedDB.

Where can IndexedDB be used?

The way I look at new tech stack, is in terms of use cases. I like knowing when and where this new tool will help me. Some of the use cases for IndexedDB are:

  • Offline web applications. IndexedDB can be used to store data locally on the client-side, which makes it ideal for building offline web applications. For example, you could build a note-taking app that allows users to create and save notes even when they’re offline.
  • Caching web application data. IndexedDB can be used to cache web application data for offline availability. This can help improve the performance of your web application by reducing the number of requests made to the server.
  • Storing client-specific data that is not stored or requested from the server. IndexedDB can reduce the network traffic and latency by storing data locally and synchronizing it with the server when needed.
  • Creating web applications with rich query abilities. IndexedDB supports indexes, cursors, ranges, and transactions to perform complex operations on the data.
  • Building browser extensions. Some browser modules, such as devtools or extensions, may use IndexedDB for storage.
  • Supporting objects that are not compatible with Web Storage. IndexedDB can store any objects that support the structured clone algorithm, such as videos, images, arrays, maps, sets, etc.

What are some of IndexedDB storage limitation?

IndexedDB is a powerful and flexible API for web data storage. However, it also has some limitations and challenges, such as:

  • Browser compatibility and support. Not all browsers support IndexedDB or implement it in the same way. Some browsers may have different storage limits or security policies for IndexedDB.
  • Complexity and learning curve. IndexedDB is a low-level API that requires a lot of boilerplate code and error handling. It also has a different data model and syntax than SQL-based databases, which may be unfamiliar to some developers.
  • Performance and scalability. IndexedDB is not designed for high-performance or large-scale applications. It may have performance issues when dealing with large amounts of data or concurrent transactions. It also lacks some features that are common in other databases, such as backup, restore, encryption, compression, etc.

What are some security aspects of IndexedDB?

Security is an important aspect of web data storage, especially when dealing with sensitive or personal data. IndexedDB is a browser-based database that allows you to store and manipulate large amounts of structured data locally. However, how secure is IndexedDB and what are the risks and challenges associated with it?

Security advantes of it are:

  • IndexedDB is locked to the origin, which means that only the web application that created the database can access it. This prevents cross-site scripting (XSS) attacks or unauthorized access from other domains.
  • IndexedDB supports encryption of data before storing it into the database. This can be done using some JavaScript libraries or frameworks that provide encryption and decryption functions, such as YDN-DB, CryptoJS, or WebCrypto API. Encryption can protect the data from being read or modified by malware or physical takeover attacks.
  • IndexedDB does not store the data in plain text form, but rather in binary format using the structured clone algorithm. This makes it harder for attackers to view or manipulate the data using dev tools or file explorers.

Security limitations of using it are:

  • IndexedDB does not provide any built-in encryption or security features. The developer is responsible for implementing encryption and decryption logic, as well as handling key management and user authentication.
  • IndexedDB can be deleted at any time by the user or by the browser. The user can clear the browser data or use private browsing mode to remove the IndexedDB data. The browser can also delete the IndexedDB data when it reaches the storage limit or when it detects low disk space.
  • IndexedDB can be vulnerable to other types of attacks, such as man-in-the-middle (MITM) attacks, cross-site request forgery (CSRF) attacks, or denial-of-service (DoS) attacks. These attacks can compromise the integrity, availability, or confidentiality of the data by intercepting, modifying, deleting, or flooding the requests to the database.

As you can see, IndexedDB is not completely secure and has some trade-offs between performance and security. You should use IndexedDB only when you need to store structured data that is not suitable for other storage options, such as Web Storage or Cookies. You should also consider using encryption and other security measures to protect your data from unauthorized access or modification.

How do you get started with IndexedDB?

One thing is certain, you don't need to install IndexedDB. It is a built-in feature of modern web browsers. However, you need to use the IndexedDB API to create and manipulate databases in your web applications. The IndexedDB API is a JavaScript interface that allows you to perform various operations on the database, such as opening, creating, updating, deleting, and querying data.

To use the IndexedDB API, you need to follow these basic steps:

  • Open a database connection using the indexedDB.open() method. This method takes two parameters: the name of the database and the version number. The version number is used to track changes in the database schema and trigger the onupgradeneeded event when needed.
  • Handle the onupgradeneeded event, which is fired when the database is created for the first time or when the version number is increased. In this event handler, you can create object stores and indexes for your data using the IDBDatabase.createObjectStore() and IDBObjectStore.createIndex() methods.
  • Handle the onsuccess event, which is fired when the database connection is established. In this event handler, you can start transactions and requests to perform operations on the data using the IDBDatabase.transaction() and IDBTransaction.objectStore() methods.
  • Handle the onerror event, which is fired when an error occurs during any of the above steps. In this event handler, you can handle the error and display an appropriate message to the user.