LocalStorage vs indexDB

Recently I’ve worked on projects that separately used localStorage & indexDB, so i am kinda curious what is the diff, after some search, here is my understanding.

Obviously, both localStorage and indexDB is client side storage solutions provided by modern web browser.

But there’s lots of diff between them, could be analyzed from the following perspectives:

Data structure:

• IndexedDB:

  • is a NoSQL DB, store in key-value pair format but allow structured data(obj, arr) with indexes

  • supports complex queries, transactions

  • suitable for storing large, structured data sets.

• localStorage:

  • simple string-based key-value storage

  • meant for simple storage and retrieval tasks

Storage limits:

• IndexedDB: larger storage limits: range from hundreds of MBs to GBs, ideal for data like images, videos, or entire datasets

• LocalStorage: limited to about 5-10 MB per domain

Performance:

• IndexedDB: asynchronous operation (none-blocking), high performance, handy for large DB

• LocalStorage: synchronous operation (blocking), slower with potential causing UI performance issues

When to use:

• IndexedDB: Choose this for large-scale, structured, and performance-critical tasks.

• LocalStorage: Opt for this for small, quick, and simple tasks where blocking is acceptable.