Storage for the web

Hay muchas opciones diferentes para almacenar datos en el browser. ¿Cuál es mejor para tus necesidades?

April 27, 2020
Updated May 7, 2020

Las conexiones a Internet pueden ser defectuosas o inexistentes mientras viaja, por lo que el soporte sin conexión y el rendimiento confiable son características comunes en las aplicaciones Web progresivas. Incluso en entornos inalámbricos perfectos, el uso prudente del almacenamiento en cache y otras técnicas de almacenamiento puede mejorar sustancialmente la experiencia del Username. Hay varias formas de almacenar en caché los recursos de la aplicación estática (HTML, JavaScript, CSS, imágenes, etc.) y los datos (datos de usuario, artículos de noticias, etc.). ¿Pero cuál es la mejor solución? ¿Cuánto puedes almacenar? ¿Cómo evitas que be desalojado?

What should i wear?

Here is a general recommendation for storing resources:

IndexedDB y la API de almacenamiento en caché son compatibles con todos los browsers modernos. Ambos son asincrónicos y no bloquearán el hilo principal. Son accesibles desde el window Object, Web Workers, and Service Workers, making them easy to use anywhere in your code.

What about other storage mechanisms?

There are several other storage mechanisms available in the browser, but they are of limited use and can cause significant performance issues.

Session storage is eyelash specific and is tailored to the life of the eyelash. This can be useful for storing small amounts of session-specific information, for example, an IndexedDB key. It should be used with caution because it is synchronous and will block the main thread. It is limited to about 5MB and can only contain strings. Because it is specific to a tab, it cannot be accessed by web workers or service workers.

Local storage should be avoided because it is synchronous and will block the main thread. It is limited to about 5MB and can only contain strings. LocalStorage is not accessible to web workers or service workers.

Cookies tienen sus usos, pero no deben usarse para almacenamiento. Las cookies se envían con cada solicitud HTTP, por lo que almacenar algo más que una pequeña cantidad de datos aumentará significativamente el tamaño de cada solicitud web. Son síncronos y los trabajadores web no pueden acceder a ellos. Al igual que LocalStorage y SessionStorage, las cookies se limitan solo a cadenas.

the File system API and the FileWriter API provide methods for reading and writing files to a sandboxed file system. While it is asynchronous, it is not recommended because it is
only available in Chromium-based browsers.

The File System Access API was designed to make it easy for users to read and edit files on their local file system. The user must grant permission before a page can read or write to any local file, and permissions are not preserved between sessions.

WebSQL should do not be used, and the existing usage must be migrated to IndexedDB. The support has has been deleted de casi todos los principales navegadores. El W3C stopped maintaining the Web SQL specification in 2010, with no additional upgrade plans planned.

The application cache must do not and the existing usage must be migrated to the service workers and the cache API. Has been
obsolete and the compatibility will be removed from browsers in the future.

How much can I store?

Soon, a lot of, at least a couple hundred megabytes and potentially hundreds of gigabytes or more. Browser implementations vary, but the amount of available storage is generally based on the amount of storage available on the device.

• Chrome allows the browser to use up to 80% of the total disk space. One source can use up to 60% of the total disk space. You can use the StorageManager API to determine the maximum available quota. Other Chromium-based browsers may allow the browser to use more storage. See PR # 3896 for Chrome deployment details.
• Internet Explorer 10 and later versions can store up to 250MB and will alert the user when more than 10MB has been used.
• Firefox allows the browser to use up to 50% of free disk space. A
  eTLD + 1
  group (for example, example.com, www.example.com and foo.bar.example.com)
  can use up to 2GB. You can use the StorageManager API to determine how much space is available.
• Safari (both desktop and mobile) seems to allow up to 1GB. When the limit is reached, Safari will ask the user to increase the limit in 200MB increments. I couldn't find any official documentation on this.

In the past, if a site exceeded a certain threshold for stored data, the browser would ask the user to grant permission to use more data. For example, if the source used more than 50 MB, the browser will ask the user to allow it to store up to 100 MB and then it will ask again in 50 MB increments.

Today, most modern browsers will not warn the user and will allow a site to use up to its allotted quota. The exception seems to be Safari, which is requesting 750MB and requesting permission to store up to 1.1GB. If a source tries to use more than its allotted quota, subsequent attempts to write data will fail.

How can I check the amount of storage available?

In many browsers, you can use the
StorageManager API to determine how much storage is available to the source and how much storage it is using. Reports the total number of bytes used by IndexedDB and the Cache API, and calculates the approximate remaining storage space available.

if (navigator.storage && navigator.storage.estimate) {
const quota = await navigator.storage.estimate();
const percentageUsed = (quota.usage / quota.quota) * 100;
console.log(`You've used ${percentageUsed}% of the available storage.`);
const remaining = quota.quota - quota.usage;
console.log(`You can write up to ${remaining} more bytes.`);
}

StorageManager is not implemented in all browsers still, so you need to detect it before using it. Even when it is available, it should catch over quota errors (see below). In some cases, the available quota may exceed the actual amount of available storage.

To inspect

During development, you can use your browser's DevTools to inspect the different types of storage and easily delete all stored data.

While working on this article, I wrote a simple tool to quickly try to use as much storage as possible. It's a quick and easy way to experiment with different storage mechanisms and see what happens when you use up your entire quota.

How to handle the excess of quota?

What should you do when you exceed the quota? Most importantly, you should always detect and handle typing errors, be it QuotaExceededError o algo mas. Luego, dependiendo del diseño de su aplicación, decida cómo manejarlo. Por ejemplo, elimine el contents al que no se ha accedido en mucho tiempo, elimine datos según el tamaño o proporcione una forma para que los usuarios elijan lo que desean eliminar.

Both IndexedDB and Cache API return a DOMError called
QuotaExceededError when you have exceeded the available quota.

IndexedDB

If the origin has exceeded its quota, attempts to write to IndexedDB will fail. The transaction onabort () handler será llamado, pasando un event. El evento incluirá un DOMException in the error property. Checking the error yam To return to QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
const error = event.target.error; 
if (error.yam == 'QuotaExceededError') {
}
};

Cache API

If the origin has exceeded its quota, attempts to write to the cache API will be rejected with a QuotaExceededError DOMException.

try {
const cache = await caches.open('my-cache');
await cache.add(new Request('/sample1.jpg'));
} catch (err) {
if (error.yam === 'QuotaExceededError') {
}
}

How does the eviction work?

Web storage falls into two categories, "Best effort" and "Persistent." Best effort means that the browser can clear storage without interrupting the user, but it is less durable for long-term or critical data. Persistent storage is not automatically cleared when storage is low. The user must manually delete this storage (via browser settings).

By default, a site's data (including IndexedDB, Cache API, etc.) is in the best effort category, which means that unless a site has
persistent storage requested, the browser may evict data from the site at its discretion, for example when device storage is low.

The best effort eviction policy is:

• Chromium-based browsers will begin to evict data when the browser runs out of space, erasing all data from the least recently used source site first, then the next, until the browser is no longer over the limit.
• Internet Explorer 10+ will not evict the data, but it will prevent the source from writing more.
• Firefox will begin to evict data when available disk space is full, erasing all data from the least recently used source site, then the next one, until the browser is no longer over the limit.
• Safari previously didn't evict data, but recently implemented a new seven-day limit on all write storage (see below).

A partir de iOS y iPadOS 13.4 y Safari 13.1 en macOS, existe un límite de siete días en todo el almacenamiento de escritura de scripts, incluido IndexedDB, el registro del trabajador del servicio y la API de caché. Esto significa que Safari desalojará todo el contenido de la caché después de siete días de uso de Safari si el usuario no interactúa con el sitio. Esta política de desalojo does not apply to installed PWAs that have been added to the home screen. Watch
Complete blocking of third-party cookies and more at Blog de WebKit para obtener detalles completos.

Bonus: Why use a container for IndexedDB?

IndexedDB is a low-level API that requires significant configuration before use, which can be particularly painful for storing simple data. Unlike most modern promise-based APIs, it is event-based. Promise wrappers like
idb for IndexedDB it hides some of the powerful functions but more importantly it hides the complex machinery (eg transactions, schema versioning) that comes with the IndexedDB library.

conclusion

Gone are the days of limited storage and prompting the user to store more and more data. Sites can efficiently store all the resources and data they need to function. Using the StorageManager API you can determine how much is available to you and how much you have used. And with
persistent storage, unless the user removes it, you can protect it from eviction.

Additional Resources

Thanks

A special thanks to Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink, and Victor Costan for reviewing this article. Thanks to Eiji Kitamura, Addy Osmani, and Marc Cohen, who wrote the original articles on which it is based. Eiji wrote a useful tool called Browser storage abuser which was useful to validate the current behavior. It allows you to store as much data as possible and see the storage limits in your browser. Thanks to Francois Beaufort, who researched Safari to find out its storage limits.

The image of the hero is by Guillaume Bolduc in
Unsplash.