Use IndexedDB (instead of Local Storage) for Client Side Storage- 4 mins
I was working on a data dashboard, there are a number of filters, including rules (is or is not), keywords, and date range etc, user can change these filters to set up a view that they will use on daily basis, that means the filter set up should be saved somewhere. The legacy code used local storage, but it has some limitations, one is that every time user update the filter you have to use
JSON.parse() to parse the string, and if you want to change the schema of the data, you have to write code to sort of “cache busting” the local storage.
Local Storage VS IndexedDB
(The actual stats are different for various browsers, this is just an overview)
|Storage Size||Up to 10MB||update to 50MB|
|Storage Format||strings only of key value||built on transactional database model, you can save complex structured data as value|
|Block UI||synchronous||mostly asynchronous|
|API||simple, such as setItem, getItem||more complicated|
To know more about core concepts of IndexedDB see here.
What I want to achieve are 1) easy to update the storage, ideally when user changes the filter, the criteria is saved 2) easy to update the schema as the requirement for client storage evolves 3) easy to expand later if there are more filter with different type.
It seems that IndexedDB is a better option in my case.
Implementation (wrapper library and redux)
However, if you look at the native api of the IndexedDB here, it is overwhelming, it feels like you are writing XHR from scratch by hand, no one does that now. Thanks to Open Source, there are a few wrapper libraries for IndexedDB, I used Dexie because the api looks intuitive and well maintained.
Scenario one is to save these dashboard filters and update them, this is how I implemented it:
db.js, I initialize the db like this:
To update the data in the storage, I used the Dexie api, which is similar to database query, something like this:
When the page refreshs, you should be able to see the IndexedDB version is updated. One thing bugs me a bit is the chrome dev tool has some kind of lagging issue, sometimes you have to close and reopen the dev tool to see changes.