The browser can store gigabytes of data

Until recently, I thought browsers could only store a few megabytes of data. I was wrong!

Modern browsers can store gigabytes of data.

Read the "Why this matters: local-first apps" sectionWhy this matters: local-first apps

I've been looking into local-first architectures for web applications lately. I'll define it here as having a database in the browser and syncing data between server and client using a sync engine. In its simplest form, you send the client all the data it might ever need and store it in a browser database like SQLite.

As I read about this, I wondered: can we really store everything in the browser? How big is too big?

Read the "Investigating browser storage" sectionInvestigating browser storage

As a complement to reading the docs, I enlisted Claude (the AI) to write a little tool that writes random data to IndexedDB. You can try it here.

The storage docs explain how the allotted quota is computed by each browser. The rules are a bit of a mouthful and vary between browsers.

The best way is to ask the API:

await navigator.storage.estimate()
{
    "quota": 598791846297,
    "usage": 24525537,
    "usageDetails": {
        "indexedDB": 24525537
    }
}

This same info is also in the devtools under Application > Storage.

Note: for navigator.storage to exist, we need to be in a secure context. Basically https or localhost, 127.0.0.1.

A proxy rule I use as mental model: Firefox is the least generous right now, and allows 10GB per origin¹.

Extra notes:

• If you write too much data you'll get a QuotaExceededError: Chrome devtools (Application > Storage) allow simulating a storage quota. Convenient to trigger QuotaExceededError.
• In Chrome incognito the quota is only 2GB, and the data is cleared when the window closes. Firefox is 10GB, private window or not.
• I looked at IndexedDB, but the storage quota rules apply the same way to the OPFS (Origin Private File System), the other large browser storage contender.

Read the "Best-effort vs persistent storage" sectionBest-effort vs persistent storage

A caveat: by default, storage is best-effort.

If you want stronger guarantees, you can ask for persistent storage:

const granted = await navigator.storage.persist();
console.log(granted);

• Firefox asks the user with a permission prompt (like for geolocation).
• Chrome just decides on its own based on vague rules².
• Safari also decides without prompting the user.

In practice, eviction of best-effort storage is very rare³. My conclusion is that best-effort is fine for any app that also stores data on a server.

Persistent storage might enable true local, serverless apps with the feel of native software - a slightly different use case from the typical web app.

Read the "Conclusion" sectionConclusion

So how big is too big? Well, a few gigabytes of storage could be fine. Hundreds of megabytes is not pushing boundaries.

This is a lot of data! For a typical business application, it might mean you can sync all the user data to the client. I think this is true in many, many cases⁴.

For these applications, sync engines could provide an amazing development experience. I'm pretty excited about that.