Recently I have been doing some research about storing an application’s data inside the browser itself without the need for a back-end server or a database of any kind. Because most of my work is in front-end development I tend to prefer doing a lot of things on the client side or at least experiment with what can be done only in the browser.

I was laying my eyes on whatwebcando.today for quite some time now and by just taking a quick look at the features that the web can do, it makes you realise that we don’t utilise a lot of the browser features to make the app experience more enjoyable and faster.

Saving data in the browser is mainstreamly done in localStorage which is not the ideal solution as it turns out to be. Here are some insights about what the topic:

• localStorage blocks the main thread because it is synchronous. It is limited to 5MB, IndexedDB should be used instead
• Using localStorage you can only store strings which make us use workarounds like JSON.parse & JSON.stringify
• IndexedDB is asynchronous, it doesn’t block the main thread and can be used in both web workers and service workers
• Chrome allows to store up to 60% of total disk space
• Firefox allows up to 2GB
• How to know how much space is available? use the StorageManager API
• Using IndexedDB, you can know when your app has exceeded the quota and you will be able to delete some of the data if you want or give the user the option to decide what they want to do
• Chrome will delete an app’s data if storage is low, it will delete the data from the least recently used and it will stop deleting when the storage is not low anymore
• Safari on macOS and iOS have more size restrictions for how much data you can store
• use CacheStorage to cache network requests but use IndexedDB to store the data