Eye opening exp with indexDB

What do we think when we hear about indexDB?

• Optimised
• Speed
• performance
• Complexity
• preserve data structure
• Silver bullet ??

We rarely used this in our projects due to complexity overhead but back of our mind we know its better than storing data in localStorage. JSON.stringify and JSON.parse kills the performance.

Today lets check the performance of the indexDB vs localStorage so that we can make informed decision in future and trust me you will feel no or less regret next time using localStorage.

Testing Read and write speed

So i created simple react app which write 125kB and 380kB of sample data using localStorage and indexDB. Data that we are writing is

{ 
  name: "Test", 
  value: Math.random(), 
  data: { 
    year: 2022, 
    month: 9, 
    day: 1, 
    status: { 
      success: true,
        msg: "hi" 
      } 
    } 
};        

First test we will use 1000 entries and then with 3000

?? what?

IndexdDB is supposed to be fast no? But Localstorage with silly JSON.stringify and JSON.parse is winning the race. Wait! May be IndexDB is designed for larger data.

Lets test with 3000 entries

Oh! its laughable like you have to wait 20sec to write 400kB? Where is the performance? I was curious also then i found this hackernews thread.

After going through cmnts I came to know that indexDB is slow. That is why localStorage is used every where despite its well known drawbacks. This was eye opening to me and next i wanted to know why indexDB exists.

Delete indexDB?

No! as we see indexDB is slow in both read and write ops so whats the point of even having it? Lets discuss few cases where indexDB will shine.

1. Memory limit with indexDb you will get almost unlimited amount of space so that you can cache your database to user's browser ?? ( kidding ). But yes if you have use case where you need to store large amount of data then go for indexDB
2. Async ops speed is not everything when it comes to high performing apps. Localstorage took 1/10th of the time as compare to indexDB but it blocks the main thread and halted it for those milliseconds. On the other hand indexDB ops are async which mean even if they take longer the main thread is still working and your app is responsive. Which IMO is good point to consider indexDB on relevant cases
3. Batch ops we can speed up indexDB if we batch the ops. But its way too complex so finding good 3rd party package can resolve it.

Conclusion

Localstorage i great and is answer to 90% of usecases but indexDB solve some unique problems. So knowing both things will help us to make better decisions. Do let me know in cmnts if this was shocking to you as well. Also go checkout this yourself as i have hosted this code https://index-db-test.vercel.app/. And chances are indexDB implementation can be improved so checkout https://github.com/rajanlagah/index-db-test.

Do Let me know if this was eye opener for you as well in comments ??.