Tout l'espace de stockage ne se valent pas: découvrez les buckets de stockage

Thomas Steiner

La norme de stockage définit une API pour le stockage persistant et les estimations de quotas, ainsi que l'architecture de stockage de la plate-forme. Nous lançons une API pour rendre plus prévisible l'éviction du stockage persistant en cas de forte pression de mémoire. Il est disponible à partir de Chromium 122.

Quel problème la norme de stockage résout-elle ?

Traditionnellement, lorsque l'utilisateur manque d'espace de stockage sur son appareil, les données stockées à l'aide d'API telles que IndexedDB ou localStorage sont perdues sans que l'utilisateur puisse intervenir. Pour rendre le stockage persistant, vous pouvez appeler la méthode persist() de l'interface StorageManager. Il demande simultanément l'autorisation à l'utilisateur final et, une fois l'autorisation accordée, l'espace de stockage devient persistant:

const persisted = await navigator.storage.persist();
if (persisted) {
  /* Storage will not be cleared except by explicit user action. */
}

Cette méthode pour demander la persistance du stockage est tout ou rien. Il n'existe aucun moyen d'exprimer des besoins de persistance plus précis. C'est un bucket de stockage unique.

API Storage Buckets

L'objectif de base de l'API Storage Buckets est d'autoriser les sites à créer plusieurs buckets de stockage, dans lesquels le navigateur peut choisir de supprimer chaque bucket indépendamment des autres buckets. Cela permet aux développeurs de spécifier la priorité des évictions afin de s'assurer que les données les plus précieuses ne sont pas supprimées.

Exemple de cas d'utilisation

Pour illustrer l'utilité des buckets de stockage, imaginez une application de messagerie. Il ne serait pas possible si l'application perdait les brouillons non envoyés de l'utilisateur qui n'existent que sur le client. En revanche, s'ils sont stockés sur un serveur, l'utilisateur appréciera probablement que certains de ses e-mails de boîte de réception les plus anciens soient supprimés du client si son navigateur est soumis à une forte pression sur le stockage.

Interface de l'application E-mail
Application de messagerie avec des buckets de stockage distincts pour la boîte de réception et les brouillons. (À titre d'illustration uniquement, cela ne reflète pas nécessairement le fonctionnement de Gmail.)

Utiliser l'API Storage Buckets

Créer un bucket de stockage

Vous pouvez créer un bucket de stockage à l'aide de la méthode open() sur l'interface StorageBucketManager.

// Create a storage bucket for emails that are synchronized with the
// server.
const inboxBucket = await navigator.storageBuckets.open('inbox');

Créer un bucket de stockage persistant

Pour vous assurer que le bucket de stockage est persistant, vous pouvez transmettre les arguments d'option durability et persisted à la méthode open():

  • persisted détermine si le bucket de stockage doit être conservé ou non. Les valeurs autorisées sont false (par défaut) ou true.

  • durability fournit un indice au navigateur qui l'aide à trouver un compromis entre les performances d'écriture et un risque réduit de perte de données en cas de coupure de courant. Les valeurs autorisées sont 'relaxed' (par défaut) ou 'strict':

    • 'strict' bucket tente de minimiser le risque de perte de données en cas de coupure de courant. Cela peut avoir un impact sur les performances réduites, c'est-à-dire que les écritures peuvent prendre plus de temps, affecter les performances globales du système, consommer davantage d'énergie de la batterie et s'user plus rapidement l'appareil de stockage.
    • Les buckets 'relaxed' peuvent "oublier" les écritures terminées au cours des dernières secondes en cas de coupure de courant. En retour, l'écriture de données dans ces buckets peut offrir de meilleures caractéristiques de performances, prolonger l'autonomie de la batterie et prolonger la durée de vie de l'appareil de stockage. De plus, une coupure de courant n'entraînera pas une corruption des données plus fréquente que pour les buckets 'strict'.
// Create a storage bucket for email drafts that only exist on the client.
const draftsBucket = await navigator.storageBuckets.open('drafts', {
  durability: 'strict', // Or `'relaxed'`.
  persisted: true, // Or `false`.
});

Accéder aux API de stockage depuis un bucket de stockage

Chaque bucket de stockage est associé à des API de stockage, par exemple IndexedDB, l'interface Cache ou l'interface File. Ces API de stockage fonctionnent comme d'habitude, à la différence que le point d'entrée provient de l'interface StorageBucket, par exemple StorageBucket.indexedDB.

const inboxDb = await new Promise(resolve => {
  const request = inboxBucket.indexedDB.open('messages');
  request.onupgradeneeded = () => { /* migration code */ };
  request.onsuccess = () => resolve(request.result);
  request.onerror = () => reject(request.error);
});

Déboguer les buckets de stockage dans les outils de développement

Inspectez les buckets de stockage dans une arborescence dédiée dans la section Application > Stockage.

Avant et après l'activation de l'arborescence des buckets de stockage dans la section "Stockage".

Ressources utiles