# 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.