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 quota, ainsi que l'architecture de stockage de la plate-forme. Nous lançons une API pour rendre l'éviction du stockage persistant sous forte pression de mémoire plus prévisible. Elle 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 avec des API telles qu'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 modifie le stockage pour qu'il soit persistant une fois accordé:

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

Cette méthode de stockage persistant est tout ou rien. Il n'est pas possible d'exprimer des besoins de persistance plus précis. Il s'agit d'un seul bucket de stockage.

API Storage Buckets

L'idée de base de l'API Storage Buckets est d'autoriser les sites à créer plusieurs buckets de stockage, où le navigateur peut choisir de supprimer chaque bucket indépendamment des autres. Cela permet aux développeurs de spécifier une priorité d'éviction pour s'assurer que les données les plus intéressantes ne sont pas supprimées.

Exemple de cas d'utilisation

Pour illustrer les cas d'utilisation des buckets de stockage, imaginons une application de messagerie. Il serait impardonnable que l'application perde les brouillons non envoyés de l'utilisateur qui n'existent que sur le client. En revanche, si les e-mails sont stockés sur un serveur, l'utilisateur acceptera probablement que certains de ses e-mails les plus anciens soient supprimés du client si son navigateur est soumis à une forte pression de stockage.

Interface de l'application de messagerie
Application de messagerie avec des buckets de stockage distincts pour la boîte de réception et les brouillons. (Il s'agit d'une 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 des 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 à échanger les performances d'écriture contre un risque réduit de perte de données en cas de panne de courant. Les valeurs autorisées sont 'relaxed' (par défaut) ou 'strict':

    • Les buckets 'strict' tentent de minimiser le risque de perte de données en cas de panne de courant. Cela peut se traduire par une réduction des performances, ce qui signifie que les écritures peuvent prendre plus de temps, avoir un impact sur les performances globales du système, consommer plus d'énergie de la batterie et endommager plus rapidement l'appareil de stockage.
    • Les buckets 'relaxed' peuvent "oublier" les écritures effectuées au cours des dernières secondes en cas de perte de courant. En retour, l'écriture de données dans ces buckets peut avoir de meilleures caractéristiques de performances, et peut permettre de prolonger la durée de charge de la batterie et de prolonger la durée de vie de l'appareil de stockage. De plus, une panne de courant ne provoque pas de corruption de données à un taux plus élevé 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 à partir d'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, mais 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 des buckets de stockage dans DevTools

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

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

Ressources utiles