Bonjour mes amis.Je vous présente la traduction de l'article «Stockage pour le Web» de Pete LePage.Il existe plusieurs technologies pour stocker des données dans un navigateur. Quel est le meilleur?Une connexion Internet peut être mauvaise ou même absente à certains endroits. Par conséquent, la prise en charge hors ligne est l'une des principales caractéristiques des applications Web progressives . Même avec une connexion haut débit, il est prudent d'utiliser la mise en cache et d'autres techniques pour améliorer l'expérience utilisateur. Il existe plusieurs façons de sauvegarder des fichiers (HTML, JavaScript, CSS, images, etc.) et des données (données utilisateur, articles de presse, etc.). Mais quelle solution est préférable de choisir? Et comment assurer sa durabilité?Que faut-il utiliser?
Je peux conseiller ce qui suit:IndexedDB et Cache API sont pris en charge par tous les navigateurs modernes. Ils sont asynchrones, c'est-à-dire Ne bloquez pas le thread principal (exécution de code). Ils sont disponibles dans l'objet Window, les travailleurs Web et les travailleurs de service. En d'autres termes, ils peuvent être utilisés partout.Et les autres mécanismes?
Le navigateur possède également d'autres mécanismes de stockage de données, mais ils ont certaines limites et peuvent entraîner des problèmes de performances.- SessionStorage . , , , IndexedDB. , , . 5 ( ), - -.
- LocalStorage . 5 ( ), - -.
- Cookies . HTTP-, . , -, .
- File System API FileWriter API . , , , Chrome.
- Native File System API . . .
- WebSQL , IndexedDB. . W3C 2010 .
- Application Cache , - Cache API. .
?
Au moins quelques centaines de mégaoctets, potentiellement des centaines de gigaoctets. Cela dépend du navigateur, cependant, la quantité de stockage est généralement basée sur la quantité de mémoire disponible sur l'appareil de l'utilisateur.- Chrome vous permet d'utiliser jusqu'à 60% de l'espace disque. Vous pouvez utiliser l'API StorageManager pour déterminer la limite (quota).
- Internet Explorer 10 et versions ultérieures peuvent stocker jusqu'à 250 Mo de données.
- Firefox vous permet de stocker jusqu'à 2 Go de données. Vous pouvez utiliser l'API StorageManager pour déterminer la limite.
- Safari (sur ordinateur et sur mobile) vous permet de stocker jusqu'à 1 Go de données. Une fois la limite atteinte, Safari demande à l'utilisateur la permission d'augmenter le quota de 200 Mo.
Dans le passé, lorsque la limite de stockage était atteinte, les navigateurs demandaient la permission de l'utilisateur pour augmenter la quantité de mémoire. Par exemple, lorsqu'une limite de 50 Mo a été atteinte, le navigateur a demandé à l'utilisateur l'autorisation d'augmenter le quota à 100 Mo et donc tous les 50 Mo.Aujourd'hui, la plupart des navigateurs ne le font pas, ce qui augmente automatiquement la quantité de stockage dans le quota. L'exception est Safari, qui, lorsqu'il atteint 750 Mo, demande la permission de l'utilisateur pour augmenter la limite à 1,1 Go. Une tentative de dépassement du quota se terminera par un échec.Comment vérifier le solde de la limite?
Pour cela, dans de nombreux navigateurs, vous pouvez utiliser l'API StorageManager. Il montre le nombre total d'octets utilisés par IndexedDB et l'API Cache, vous permettant de calculer le reste.if(navigator.storage && navigator.storage.estimate) {
const quota = await navigator.storage.estimate()
const percentageUsed = (quota.usage / quota.quota) * 100
console.log(` ${ percentageUsed}% `)
const remaining = quota.quota - quota.usage
console.log(` ${remaining} `)
}
Veuillez noter que l'API StorageManager n'est pas encore prise en charge par tous les navigateurs. Cependant, même s'il est pris en charge, un gestionnaire d'erreurs doit être fourni. Dans certains cas, le quota peut dépasser la capacité de stockage réelle.Inspection
Pendant le développement, vous pouvez utiliser des outils de navigation pour suivre l'état de divers référentiels et les nettoyer.
En travaillant sur cet article, j'ai écrit cet outil simple pour tester rapidement les capacités de stockage. Il s'agit d'un moyen rapide et facile d'expérimenter différents mécanismes de stockage de données et de voir ce qui se passe lorsque le quota est dépassé.Comment gérer les erreurs?
Que faire lorsque la limite est atteinte? Bien sûr, gérez les erreurs, que ce soit QuotaExceededError ou autre chose. Ensuite, selon la conception de votre application, vous devez choisir la manière dont elles sont traitées. Vous pouvez, par exemple, supprimer les anciens contenus ou données en fonction de leur taille, ou donner à l'utilisateur la possibilité de décider quoi supprimer.IndexedDB et l'API de cache lancent un DOMError QuotaExceededError lorsqu'un quota est dépassé.Indexeddb
Lorsque la limite est atteinte, une tentative d'écriture de données dans IndexedDB échouera. La méthode onabort () sera appelée avec l'événement comme argument. L'événement contiendra une exception DOMException dans la propriété error. La vérification du nom de l'erreur renvoie une erreur QuotaExceededError.const transaction = idb.transaction(['entries'], 'readwrite')
transaction.onabort = function(event) {
const error = event.target.error
if(error.name === 'QuotaExceededError') {
}
}
API de cache
Une tentative d'écriture de données dans l'API de cache lorsque la limite est atteinte sera rejetée avec une exception DOMException QuotaExceededError.try {
const cache = await caches.open('my-cache')
await cache.add(new Request('/sample1.jpg'))
} catch (error) {
if(error.name = 'QuotaExceededError') {
}
}
Comment fonctionne le nettoyage du stockage?
Les référentiels Web se répartissent en deux catégories, «autonomes» et «gérés». Autonome signifie que le référentiel peut être effacé par le navigateur sans intervention de l'utilisateur, mais il est moins adaptable lors d'une utilisation prolongée, ainsi qu'en présence de données critiques. Les emplacements de stockage gérés ne sont pas automatiquement nettoyés lorsqu'ils sont pleins. L'utilisateur doit effacer manuellement ces stockages (via les paramètres du navigateur).Par défaut, les stockages Web (IndexedDB, Cache API, etc.) sont classés comme autonomes, ce qui signifie que si le contrôle manuel n'est pas installé , le navigateur peut effacer indépendamment le stockage dans certaines conditions, par exemple lors du remplissage.Les conditions de nettoyage du stockage sont les suivantes:- Lorsque le stockage est plein, Chrome supprime les données, en commençant par le moins demandé (le plus ancien temps d'utilisation), jusqu'à ce que le problème de débordement soit résolu.
- IE 10+ n'efface pas le stockage, mais bloque la possibilité d'écrire des données.
- Firefox fait la même chose que Chrome.
- Safari n'a pas précédemment vidé le coffre-fort, mais a récemment ajouté une période de conservation des données de sept jours.
À partir d'iOS et d'iPad 13.4, de Safari 13.1 sur macOS, il y a une période de conservation des données de sept jours. Cela signifie que si l'utilisateur n'accède pas aux données dans les sept jours, elles seront supprimées. Cette politique ne s'applique pas aux applications ajoutées à l'écran d'accueil.Bonus: Promise Wrap Over IndexedDB
IndexedDB est une API de bas niveau qui nécessite une configuration avant utilisation, ce qui peut être inutile si vous devez stocker des données simples. Contrairement à la plupart des API modernes basées sur Promise, elle est basée sur des événements. Un wrapper de promesses, comme idb, cache certaines fonctionnalités puissantes de ce référentiel, mais, plus important encore, il cache également ses mécanismes internes complexes (transactions, versioning).Conclusion
Les périodes de stockage limité et les demandes d'autorisation des utilisateurs pour augmenter la limite sont tombées dans l'oubli. Les sites peuvent stocker efficacement toutes les ressources et données dont ils ont besoin pour travailler. À l'aide de l'API StorageManager, vous pouvez déterminer la quantité de mémoire utilisée et la quantité restante. Et en mettant le stockage en mode de contrôle manuel, vous pouvez protéger les données contre la suppression.Remarque par.:- Ici, vous pouvez voir comment écrire une application pour les notes en utilisant idb.
- Ici, vous pouvez voir comment fonctionnent les travailleurs des services.
Merci pour votre temps. J'espère que cela a été bien dépensé.