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 applications des navigateurs. 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, qui était seulement 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 de gestion des quotas, qui vous permet de gérer votre quota de stockage. La dans ce document, nous partons du principe que vous connaissez déjà les concepts généraux du stockage côté client comment utiliser des API hors connexion.

Sommaire

  1. Types de stockage <ph type="x-smartling-placeholder">
      </ph>
    1. Temporaire
    2. Persistante
    3. Illimité
    4. Comparer les types de stockage
  2. Gérer votre quota <ph type="x-smartling-placeholder">
      </ph>
    1. Utilisation et disponibilité de l'espace de stockage des requêtes
    2. Demander plus d'espace de stockage
    3. Réinitialiser le quota pour les tests
  3. Documentation de référence de l'API <ph type="x-smartling-placeholder">
      </ph>
    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 dans le tableau ci-dessous.

Stockage temporaire

Le stockage temporaire est un stockage temporaire qui est disponible pour n'importe quelle application Web. Chrome propose automatiquement le stockage temporaire de votre application, vous n'avez donc pas besoin de demander d'allocation.

Partager la piscine

L'espace de stockage temporaire est partagé entre toutes les applications Web exécutées dans le navigateur. Le pool partagé peut représenter jusqu'à 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 contenir jusqu'à 20% du pool partagé. Par exemple, si l'espace disque total disponible est 60 Go, le pool partagé de 20 Go et l'application jusqu'à 4 Go. Ce pourcentage est de 20% (jusqu'à 4 Go) sur le tiers (jusqu'à 20 Go) de l'espace disque disponible (60 Go).

Demander plus d'espace

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

Espace de stockage insuffisant

Lorsque le quota de stockage pour l'ensemble du pool est dépassé, l'intégralité des données est stockée pendant l'hôte récemment utilisé est supprimé. Le navigateur, en revanche, n'efface pas les données du stockage local SessionStorage Pour les données stockées dans d'autres API hors connexion, le navigateur les supprime dans leur intégralité, et non en partie pour éviter que les données de l'application ne soient corrompues de manière inattendue.

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

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

Espace de stockage sur disque persistant

Le stockage persistant est un espace de stockage qui reste dans le navigateur jusqu'à ce que l'utilisateur l'efface. Il est disponible Uniquement pour les applications qui utilisent l'API File System, mais elles seront à terme disponibles pour d'autres API hors connexion comme "IndexedDB" et "Application Cache".

Le quota de stockage persistant d'une application peut être supérieur à celui du stockage temporaire, mais vous devez demande de stockage à l'aide de l'API Quota Management et l'utilisateur doit vous autoriser à utiliser plus l'espace de stockage. 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 (fichiers .crx). La taille de l'espace de 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 pour Une application ou une extension Lors de l'installation, l'utilisateur est informé des autorisations requises par l'application ou l'extension. En poursuivant l'installation, l'utilisateur accorde implicitement l'autorisation toutes les pages dont les URL sont listé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 les trois types de stockage.

 Stockage temporaireEspace de stockage sur disque persistantStockage illimité
Description générale

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 les applications Chrome.

Il est défini dans le fichier manifeste et doit être autorisé 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.
AutorisationAucun 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 lors de la première utilisationn'est pas visible par 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 le quota que vous demandez est inférieur à 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 effectuant l'installation, l'utilisateur accorde implicitement l'autorisation pour toutes les pages dont les URL sont répertoriées dans le fichier manifest.json de l'application ou de l'extension.

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

Chrome invite à nouveau l'utilisateur.

 

Chrome n'invite pas l'utilisateur après l'installation, quelles que soient les demandes d'augmentation de quota émises par l'application ou l'extension.
Persistance des données

Temporaire. Le navigateur peut supprimer les données.

Persistante. Le navigateur ne supprime pas les données, sauf si l'utilisateur le demande. Les données sont disponibles dans les accès suivants.

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% du pool partagé

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 exigences de stockage, Chrome alloue à l'application de l'espace de stockage temporaire à partir de l'espace partagé.

Espace de stockage maximalJusqu'à 20% du pool partagéAussi grande que l'espace disponible sur le disque dur Il n'a pas d'espace de stockage fixe.Aussi grande que l'espace disponible sur le disque dur
Cas d'utilisation recommandéMise en cache...Applications fonctionnant hors connexion ou qui disposent d'un grand nombre d'élémentsApplications conçues pour s'exécuter dans Google Chrome
API compatibles

API hors connexion

  • Cache de l'application
  • Système de fichiers
  • IndexedDB
  • WebSQL (obsolète depuis le 18 novembre 2010)

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

API File System

API hors connexion

  • Cache de l'application
  • Système de fichiers
  • IndexedDB
  • WebSQL (obsolète)

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

Gérer votre quota

L'API Quota Management, 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 connaître la taille de stockage utilisée et l'espace disponible restant pour l'hôte, appelez queryUsageAndQuota() par le code suivant:

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

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 avoir besoin d'octets supplémentaires pour stocker ses métadonnées. En outre, les mises à jour de l'état peuvent être retardées, ce qui peut entraîner L'API ne reflète pas l'état de stockage le plus récent.

L'extrait de code suivant montre comment obtenir des informations 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 connaître l'état du stockage persistant, il vous suffit de remplacer webkitStorageInfo.TEMPORARY avec webkitStorageInfo.PERSISTENT. L'énumération se trouve également dans le un objet window (espace de noms global), ce qui vous permet d'utiliser window.PERSISTENT et window.TEMPORARY

Demander plus d'espace de stockage

Vous n'avez pas besoin de demander d'espace de stockage temporaire supplémentaire, car l'allocation est automatique et vous ne pouvez pas au-delà de la limite maximale (telle que décrite dans le tableau).

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

  • Type de stockage
  • Taille
  • Rappel réussi

En fonction de ce que vous demandez, voici ce qui se produit:

  • Si vous demandez un quota plus important, le navigateur présente une barre d'informations à l'utilisateur et l'invite à accorder ou refuser l'autorisation pour augmenter le quota. Dans certains cas, la requête peut être effectuée en mode silencieux rejetés, 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 (QUOTA_EXCEEDED_ERR) s'affiche.
  • Si vous appelez de nouveau requestQuota() alors que l'utilisateur a déjà accordé son autorisation, rien ne se passe. Il n'est donc pas nécessaire d'appeler à nouveau la méthode.

Voici comment demander plus d'espace de stockage:

// 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 le stockage dans votre application, vous pouvez effacer les données stockées pour tester la gestion des quotas dans votre application. Pour ce faire, procédez comme suit:

  1. Saisissez chrome://settings/cookies dans l'omnibox (la barre d'adresse).
  2. Recherchez votre application.
  3. Sélectionnez votre application.
  4. Cliquez sur 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 de gestion des quotas.

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 stockage utilisée 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 à autoriser ou à refuser l'accès à 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 inclure dans votre quota de stockage.
  • successCallback: rappel facultatif qui transmet le nombre d'octets accordés.
  • errorCallback: rappel d'erreur facultatif.

Développement futur

L'objectif est d'intégrer toutes les API de stockage hors connexion HTML5, y compris IndexedDB, Application Cache, File, Système et autres API éventuellement spécifiées, sous le quota de l'API Management. Vous pourrez ainsi gérer l'intégralité de l'allocation de l'espace de stockage.