Hey there! Let's tackle your PWA storage issues head-on—you're hitting a super common pain point when dealing with multi-gigabyte offline data, so let's break this down clearly.

First: Your localStorage Understanding is Spot-On #

You're absolutely right about localStorage:

• It has strict size limits (usually ~5MB per origin, varies slightly by browser)
• It stores data in memory (not disk), so even if you could store 2GB, it would cripple your app's performance and crash devices
• It's synchronous, which makes it even worse for large datasets—blocking the main thread while reading/writing

So localStorage is a hard no for your use case.

Fixing Dexie/IndexedDB RAM Overload #

IndexedDB (which Dexie wraps) is designed for large offline storage—it stores data on disk, not RAM. The RAM bloat you're seeing is almost certainly from how you're accessing the data, not the storage itself. Here's how to fix it:

• Use cursors or batch processing instead of loading all data at once: Instead of fetching an entire table with db.table.toArray(), use db.table.each(item => { /* process one item at a time */ }) or db.table.offset(start).limit(batchSize) to load small chunks. This way, only a tiny portion of your 2GB dataset is in RAM at any time.
• Avoid holding onto unnecessary references: After processing a batch of data, explicitly set variables to null to let the garbage collector free up memory. Don't keep unused arrays or objects hanging around.
• Optimize queries: If you're filtering or sorting data, make sure you have proper indexes set up in Dexie. Bad indexes can force the browser to load more data into memory than needed to fulfill your query.

File System Access API: A Viable Alternative #

Yes, the File System Access API is a great option for large datasets like yours. Here's why:

• It lets your PWA store files directly on the user's disk (with their explicit permission)
• Data lives on disk, not RAM, so you won't hit memory limits
• It supports large files (well beyond 2GB) and allows streaming access, so you can read/write parts of a file without loading the whole thing into memory

Just note that you'll need to handle user permissions gracefully—users have to approve access to their file system, and behavior can vary a bit across desktop (Chrome, Edge) and mobile (Android Chrome, Safari on iOS 16.4+).

What About LargeLocalStorage? #

Skip it. LargeLocalStorage isn't a standard web API—it's either a third-party library with limited browser support or a deprecated/non-standard feature. Relying on it will lead to compatibility issues across devices and browsers, which is a big no-no for PWAs targeting multiple platforms.

Bonus Tips for Large-Scale PWA Storage #

• Compress your data: Use formats like gzip or compress structured data into blobs before storing. This reduces disk usage and means less data needs to be loaded into memory when accessing it.
• Leverage Cache Storage for static assets: If part of your 2GB is static files (like images, videos), use the Cache Storage API instead—it's optimized for serving assets offline, and won't bloat your app's RAM.
• Monitor storage quotas: Use navigator.storage.estimate() to check how much space you're using and request more if needed (users can grant additional storage for PWAs).

内容的提问来源于stack exchange，提问作者Tillo Loozen