LocalStorage Vs IndexedDB in HTML5 offline storage

How is localStorage different from indexedDB?

localStorage and indexedDB are used for offline storage of data in HTML5. What are their main differences and which one is preferable in which situations?


On the surface, the two technologies may seem directly comparable, but if you spend some time with them you will quickly find that they are not. They are designed to accomplish a similar goal, client-side storage, but they approach the task at hand from vastly different perspectives and work best with different amounts of data.

localStorage, or more precisely Web Storage, was developed for smaller amounts of data. It is essentially just a key-value store for strings with a simple synchronous API. This last part is key. Although there is nothing in the specification to prohibit asynchronous DOM storage, currently all implementations are synchronous (i.e., block requests). Even if you don't mind using a naive key-value store for larger amounts of data, your customers will be annoyed by waiting forever for your application to load.

indexedDB, on the other hand, was developed to work with considerably larger amounts of data. First, it theoretically offers both a synchronous and an asynchronous API. In practice, however, all current implementations are asynchronous and requests do not block the user interface from loading. In addition, as the name suggests, indexedDB provides indexes. You can run rudimentary queries on your database and retrieve records by looking up their keys in specific key areas. indexedDB also supports transactions and offers simple types (e.g. date).

At this point, indexedDB seems like the superior solution for any situation. However, there is one downside to all of its features: Compared to DOM memory, the API is quite complicated. indexedDB assumes a general familiarity with database concepts, whereas you can start right away with Web Storage. If you've ever worked with cookies, there is no problem with web storage. Also, you generally need to write more code in indexedDB to get the exact same result as in Web Storage (and more code = more errors). In addition, web storage emulation is relatively easy for browsers that do not support it. With indexedDB the task wouldn't be worth your time. Before you dive into indexedDB, you should first take a look at the Quota API.

Ultimately, it is entirely up to you whether you use Web Storage or indexedDB or both in your application. A good use case for web storage is to store simple session data, such as: B. the name of a user, and storing some requests in your actual database. With the additional functions of indexedDB you can save all data that is necessary for the offline work of your application.

@yanni's answer is excellent. I just want to add a couple of things.

  1. In some situations, such as For example, with service workers, you cannot use blocking code. Hence, you cannot use localStorage and must use something like indexedDB.

  2. The API for indexedDB is complex and tedious (I would even say "horrific", YMMV). There are several "wrapper" libraries to simplify the API. I recommend urgent for you to look at this.

I've found that I do Blobs in IndexedDB while in localStorage I can only store strings. IndexdDB is better for binary data such as images, audio, and video. Yes, we can store images in base64 in localStorage, but blobs get smaller and faster as we don't have to decode them.

Quote from MDN:

About IndexedDB:

We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from.

By continuing, you consent to our use of cookies and other tracking technologies and affirm you're at least 16 years old or have consent from a parent or guardian.

You can read details in our Cookie policy and Privacy policy.