Gérer le stockage hors connexion HTML5

HTML5 a introduit de nombreuses API de stockage qui vous permettent de stocker une grande quantité de données localement dans les navigateurs de vos utilisateurs. Toutefois, l'espace alloué à chaque application est limité par défaut à quelques mégaoctets. Google Chrome vous permet de demander un quota de stockage supérieur à la limite précédente de 5 Mo.

Ce document présente les concepts de base des types de stockage utilisés dans Chrome et décrit l'API expérimentale Quota Management, qui vous permet de gérer vos quotas de stockage. Dans ce document, nous partons du principe que vous connaissez déjà les concepts généraux du stockage côté client et que vous savez utiliser les API hors connexion.

Sommaire

  1. Types de stockage
    1. Temporaire
    2. Persistant
    3. Illimité
    4. Comparer les types de stockage
  2. Gérer votre quota
    1. Utilisation et disponibilité de l'espace de stockage pour les requêtes
    2. Demander plus d'espace de stockage
    3. Réinitialiser le quota de tests
  3. Documentation de référence de l'API
    1. Constantes
    2. Présentation de la méthode
    3. Méthodes
  4. Développement futur

Types de stockage

Dans Google Chrome, vous pouvez demander trois types de stockage:

Ces types de stockage sont décrits plus en détail dans les sections suivantes et comparés les uns aux autres dans le tableau ci-dessous.

Stockage temporaire

Le stockage temporaire est un espace de stockage temporaire disponible pour toutes les applications Web. Chrome attribue automatiquement un espace de stockage temporaire à votre application. Vous n'avez donc pas besoin de demander d'allocation.

Partager le pool

L'espace de stockage temporaire est partagé entre toutes les applications Web exécutées dans le navigateur. La taille du pool partagé ne doit pas dépasser un tiers de l'espace disque disponible. L'espace de stockage déjà utilisé par les applications est inclus dans le calcul du pool partagé. En d'autres termes, le calcul est basé sur (available storage space + storage being used by apps) * .333.

Chaque application peut posséder jusqu'à 20% de l'espace partagé. Par exemple, si l'espace disque total disponible est de 60 Go, le pool partagé est de 20 Go et l'application peut avoir jusqu'à 4 Go. Ce montant est calculé à partir de 20% (jusqu'à 4 Go) de 1/3 (jusqu'à 20 Go) de l'espace disque disponible (60 Go).

Demander plus d'espace

Bien que vous puissiez interroger la quantité d'espace de stockage disponible pour votre application et la quantité de données déjà stockée pour votre application, vous ne pouvez pas demander plus d'espace de stockage temporaire. Si une application dépasse le quota alloué, une erreur est générée.

Espace de stockage insuffisant

Une fois le quota de stockage de l'ensemble du pool dépassé, l'intégralité des données stockées pour l'hôte le moins récemment utilisé est supprimée. Toutefois, le navigateur n'efface pas les données des objets LocalStorage et SessionStorage. Pour les données stockées dans d'autres API hors connexion, le navigateur les supprime entièrement et non en partie afin que les données de l'application ne soient pas corrompues de manière inattendue.

Chaque application étant limitée à un maximum de 20% de l'espace de stockage commun, la suppression n'est probablement possible que si l'utilisateur exécute activement plus de cinq applications hors connexion, qui utilisent chacune l'espace de stockage maximal.

Toutefois, l'espace de stockage disponible peut diminuer à mesure que les utilisateurs ajoutent des fichiers sur leurs disques durs. Lorsque l'espace disque disponible est insuffisant (n'oubliez pas que le pool partagé ne reçoit que la moitié de l'espace disque disponible actuel), le navigateur supprime toutes les données stockées pour l'hôte le moins récemment utilisé.

Stockage persistant

Le stockage persistant est un espace de stockage qui reste dans le navigateur jusqu'à ce que l'utilisateur le supprime. Elle n'est disponible que pour les applications qui utilisent l'API File System, mais le sera à terme pour d'autres API hors connexion telles que IndexedDB et le cache d'application.

Le quota de stockage persistant d'une application peut être supérieur à celui du stockage temporaire, mais vous devez demander un espace de stockage à l'aide de l'API Quota Management et l'utilisateur doit vous autoriser à utiliser plus d'espace. Chrome affiche une barre d'informations qui invite l'utilisateur à accorder plus d'espace de stockage local à l'application.

Stockage illimité

Le stockage illimité est semblable au stockage persistant, mais il n'est disponible que pour les applications et les extensions Chrome (fichiers .crx). La taille du stockage illimité n'est limitée que par l'espace disponible sur le disque dur de l'utilisateur. Vous pouvez demander l'autorisation unlimitedStorage dans le fichier manifeste d'une application ou d'une extension. Lors de l'installation, l'utilisateur est informé des autorisations requises par l'application ou l'extension. En continuant l'installation, l'utilisateur accorde implicitement une autorisation pour toutes les pages dont les URL sont répertoriées dans le fichier manifest.json.

Pour en savoir plus, consultez les guides du développeur pour les applications et les extensions.

Comparer les types de stockage

Le tableau suivant décrit les différences entre ces trois types de stockage.

 Stockage temporaireStockage persistantStockage illimité
Description de base

Stockage temporaire disponible pour n'importe quelle application Web.

Il est automatique et n'a pas besoin d'être demandé.

Stockage permanent qui doit être demandé via l'API Quota Management et accordé par les utilisateurs.

Espace de stockage permanent pour les extensions et applications Chrome

Il est défini dans le fichier manifeste et doit être accordé par les utilisateurs.

Disponibilité

Toutes les applications Web.

Toutes les applications Web.Ce paramètre est propre aux extensions Chrome, ainsi qu'aux applications Web hébergées et installées.
AutorisationAucune Vous pouvez l'utiliser sans le demander explicitement.

Vous devez demander plus d'espace de stockage à l'aide de l'API Quota Management.

Vous pouvez demander l'autorisation unlimitedStorage dans le fichier manifeste de l'application ou de l'extension.
Expérience utilisateur à la première utilisationInvisible pour l'utilisateur. L'application s'exécute, tout simplement.

Chrome affiche une barre d'informations qui invite l'utilisateur à accepter ou refuser la demande d'espace de stockage.

Toutefois, si la quantité de quota que vous demandez est inférieure à l'allocation actuelle de l'application, aucune invite ne s'affiche. Le quota le plus élevé est conservé.

Lors de l'installation, l'utilisateur est informé des autorisations requises par l'application ou l'extension. En continuant l'installation, l'utilisateur accorde implicitement une autorisation pour toutes les pages dont les URL sont répertoriées dans le fichier manifest.json pour app ou extension.

Expérience utilisateur lors des demandes ultérieures d'espace de stockageNon applicable. Vous ne pouvez pas demander de stockage temporaire supplémentaire.

Chrome le demande à nouveau.

 

Chrome n'invite pas l'utilisateur après l'installation, même si l'application ou l'extension en question demande une augmentation de quota.
Persistance des données

Temporaire. Le navigateur peut supprimer les données.

Persistante. Le navigateur ne supprime pas les données, sauf demande de l'utilisateur. Les données seront disponibles lors des accès ultérieurs.

Ne partez pas du principe que les données sont permanentes, car l'utilisateur peut les supprimer.

Identique au stockage persistant.

 

Espace de stockage par défaut

Jusqu'à 20% de la piscine commune.

0 Mo. Vous devez demander explicitement un espace de stockage spécifique.

0 Mo. Vous devez demander explicitement unlimitedStorage dans le fichier manifeste.

Si vous ne spécifiez pas vos besoins de stockage, Chrome alloue à l'application de l'espace de stockage à partir du pool partagé de stockage temporaire.

Espace de stockage maximalJusqu'à 20% de la piscine commune.Égal à l'espace disponible sur le disque dur. Il ne dispose pas d'un pool de stockage fixe.Égal à l'espace disponible sur le disque dur.
Cas d'utilisation recommandéMise en cache.Applications fonctionnant hors connexion ou contenant un grand nombre d'élémentsApplications conçues pour s'exécuter dans Google Chrome.
API compatibles

API hors connexion

  • Cache d'application
  • File System
  • IndexedDB
  • WebSQL (obsolète depuis le 18 novembre 2010)

Remarque:Les API de stockage Web telles que LocalStorage et SessionStorage restent fixées à 5 Mo.

API File System

API hors connexion

  • Cache d'application
  • File System
  • IndexedDB
  • WebSQL (obsolète)

Remarque:Les API de stockage Web telles que LocalStorage et SessionStorage restent fixées à 5 Mo.

Gérer votre quota

L'API de gestion des quotas, introduite dans Chrome 13, vous permet d'effectuer les opérations suivantes:

L'API est implémentée avec l'objet global window.webkitStorageInfo.

Pour accéder à la documentation de référence, consultez la section suivante.

Interroger l'utilisation et la disponibilité de l'espace de stockage

Pour interroger la taille de l'espace de stockage utilisé et l'espace disponible restant pour l'hôte, appelez queryUsageAndQuota() avec le code suivant:

  • Type de stockage que vous souhaitez vérifier
  • Rappel de réussite

L'utilisation indiquée par l'API peut ne pas correspondre à la taille réelle des données utilisateur, car chaque espace de stockage peut nécessiter quelques octets supplémentaires pour stocker ses métadonnées. En outre, les mises à jour de l'état peuvent être retardées, ce qui signifie que l'API ne reflète pas l'état de stockage le plus récent.

L'extrait de code suivant montre comment poser des questions sur l'espace de stockage:

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

Si vous souhaitez demander l'état du stockage persistant, remplacez simplement webkitStorageInfo.TEMPORARY par webkitStorageInfo.PERSISTENT. L'énumération se trouve également dans l'objet window (espace de noms global). Vous pouvez donc également utiliser window.PERSISTENT et window.TEMPORARY.

Demander plus d'espace de stockage

Vous n'avez pas besoin de demander plus d'espace de stockage temporaire, car l'allocation est automatique et vous ne pouvez pas dépasser la limite maximale (comme décrit dans le tableau).

Pour le stockage persistant pour l'API File System, le quota par défaut est de 0. Vous devez donc demander explicitement le stockage pour votre application. Appelez requestQuota() avec le code suivant:

  • Type de stockage
  • Taille
  • Rappel de réussite

En fonction de votre demande, voici ce qui se produit:

  • Si vous demandez un quota plus important, le navigateur affiche une barre d'informations à l'utilisateur et l'invite à accorder ou à refuser l'autorisation afin d'augmenter le quota. Dans certains cas, la requête peut être refusée sans notification, et le quota actuel ou inférieur est renvoyé.
  • Si le quota que vous demandez est inférieur à l'allocation actuelle de l'application, aucune invite ne s'affiche.
  • Si vous demandez plus d'espace de stockage que ce qui est autorisé, un message d'erreur s'affiche (QUOTA_EXCEEDED_ERR).
  • Si vous appelez à nouveau requestQuota() alors que l'utilisateur a déjà accordé l'autorisation, rien ne se passe. Il est donc inutile d'appeler à nouveau la méthode.

Pour demander davantage d'espace de stockage, procédez comme suit:

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

Réinitialiser le quota pour les tests

Lorsque vous testez l'espace de stockage dans votre application, vous pouvez effacer les données stockées afin de pouvoir tester à nouveau la gestion des quotas dans votre application. Pour ce faire, procédez comme suit:

  1. Saisissez chrome://settings/cookies dans l'omnibox (barre d'adresse).
  2. Recherchez votre application.
  3. Sélectionnez votre application.
  4. Cliquez sur le X à droite de la sélection en surbrillance.

Documentation de référence de l'API

Cette section décrit les méthodes de l'API Quota Management.

Constantes

Voici des constantes webkitStorageInfo, qui indiquent le type de stockage.

ConstanteValeurDescription
TEMPORARY0Stockage temporaire.
PERSISTENT1Stockage persistant.

Présentation de la méthode

queryUsageAndQuota
requestQuota

Méthodes

queryUsageAndQuota

Vérifiez la taille de l'espace de stockage utilisé et l'espace disponible restant pour l'hôte.

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);
  • successCallback: rappel facultatif avec deux paramètres:

    • Nombre actuel d'octets utilisés par l'application.
    • Nombre d'octets restants dans le quota.
  • errorCallback: rappel d'erreur facultatif.

requestQuota

Demandez plus d'espace de stockage. Le navigateur affiche une barre d'informations pour inviter l'utilisateur à accorder ou refuser à l'application l'autorisation d'avoir plus d'espace de stockage.

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
Paramètres
  • newQuotaInBytes: quantité d'octets que vous souhaitez conserver dans votre quota de stockage.
  • successCallback: rappel facultatif qui transmet la quantité d'octets accordé.
  • errorCallback: rappel d'erreur facultatif.

Développement à venir

L'objectif est de placer toutes les API de stockage hors connexion HTML5, y compris IndexedDB, Application Cache, File System et d'autres API éventuellement spécifiées, sous l'API Quota Management. Vous pourrez gérer toute l'allocation de stockage avec cet outil.