Storage for the web | Peter LePage

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.

Explore Other Notes

Newer

Jamstack full course

A solid introduction to the Jamstack, including full build tutorials for an initial SSG setup with Eleventy and Netlify, integrations with the News API service and Open Weather, geolocation checks […]

Older

@property

Looks like CSS is getting extensibility built-in with a new @property element (works like @media – also looks like we're getting CSS.registerProperty() in JavaScript […]
  • A detailed overview of the various methods available to locally store website or web app data. Overall, the recommendation […]
Murray Adcock.

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.