A detailed overview of the various methods available to locally store website or web app data. Overall, the recommendation is:
- For critical resources (images, content, scripts etc.) use a service worker, specifically the Cache Storage API;
- For all other data, use IndexedDB (though adding an additional service which allows you to use that API with promises can also be very beneficial).
These processes have wide browser support, are well maintained, and have a low user impact. They're also better at persisting. For example, SessionStorage is locked to that browser tab, LocalStorage is now quite outdated and actively blocks the main thread, and cookies are constantly refreshed so bloat your HTTP request size. Other APIs are either deprecated (WebSQL, Application Cache), lack widespread support (File System API), or require explicit user permission (bad UX – Native File System API) so should be avoided.
You can use the StorageManager API to check how much space you're using and set limits, but most modern browsers now allow such large limits it should never be an issue (the article has an explicit example of how to use that API as well as what to do if you run up against storage quotas).
It can be worth explicitly setting your data to be considered persistent storage so that browsers don't delete it when they need more device space (but obviously use this cautiously and don't abuse it).
I'd be interested to see whether IndexedDB could be used with search blobs from Algolia, even if only on a local instance based on user permission.
