This article explains how to use IndexedDB to store state in a typical client-side JavaScript application. IndexedDB has good cross-browser support and offers at least 1GB of storage. By Craig Buckler.
Note that Web Storage is synchronous: your JavaScript code pauses execution while it accesses data. This can cause performance issues when saving larger datasets.
The article content is split into:
- What do we mean by state?
- Is IndexedDB suitable for storing state?
- Creating an IndexedDB-based state management system
- Creating an IndexedDB wrapper class
- Creating the State manager class
Projects often avoid IndexedDB because its API is clunky. It’s not an obvious choice for state management, but the indexed database and large storage allocation could make it a good option for complex projects which store significant volumes of data. You will also get the code in Github - it provides an example to-do app which you can use or adapt for your own projects. Perfect!
[Read More]