↓ Aller au contenu
El Taller del Admin
  1. Articles/

Aperçu des technologies de stockage des navigateurs

·
Développement HTML5 JavaScript Navigateurs
Rubén Infante Docio
Auteur
Rubén Infante Docio
Ingénieur logiciel
Sommaire

Dans cet article, j’expliquerai les différentes technologies de stockage dans les navigateurs HTML5 afin de générer une application web capable de fonctionner hors ligne avec les technologies standard disponibles.

sessionStorage
#

C’est un objet qui stocke des informations dans l’onglet courant du domaine actuel. Mais il survit lorsque la page se rafraîchit ou que l’onglet est restauré. Une nouvelle fenêtre d’onglet créera un nouveau SessionStorage.

// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde sessionStorage
var data = sessionStorage.getItem('key');

localStorage
#

Donne accès au stockage à long terme par domaine.

// Almacena la información en localStorage
localStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde localStorage
var data = localStorage.getItem('key');

Cache d’applications (AppCache)
#

C’est un mécanisme permettant de mettre en cache les applications web afin de pouvoir travailler hors ligne avec elles. Grâce à un fichier manifest, nous pouvons spécifier quelles ressources seront disponibles hors ligne. Cela réduit également la charge sur le serveur et accélère la navigation.

Références
#

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache https://html.spec.whatwg.org/multipage/browsers.html#appcache

Base de données indexée
#

IndexedDB est une API pour le stockage côté client d’une quantité importante de données structurées. Plus que sessionStorage, LocalStorage ou globalStorage

Conclusion
#

C’est la bonne technologie pour des quantités massives de données

En savoir plus
#

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

API de fichiers
#

Cela nous permet de travailler avec une structure de fichiers, de les sauvegarder et de les lire directement sur le disque. Cela peut être utile dans des situations comme si nous voulons simuler l’upload d’un fichier dans notre application hors ligne, nous pouvons le sauvegarder sur le disque et le synchroniser plus tard, mais pour le chargement de la page, comme nous le savons, les écritures sur disque ont un coût élevé, ce que nous devons essayer d’éviter.

Dans IE et Chrome, il faut une autorisation utilisateur pour être utilisé. La limite de stockage concerne l’espace disque libre.

Plus d’informations et d’exemples
#

http://www.html5rocks.com/es/tutorials/file/filesystem/

STOCKAGE DISPONIBLE
#

BrowserssessionStoragelocalStorageFileAPICache de pliquage (AppCache)Indexé DbInternet Explorer 114864 k4864 kNot limited500MB/ Illimité (Demande à l’utilisateur)250 MB (configurable jusqu’à 1 Go par utilisateur)Google Chrome 445101 k5101 kNot limitedIllimité *1300 Mb (Au moins)Microsoft Edge 1.04864 k4864 kPas limité500MB/ Illimité (Demande à l’utilisateur)250 MB (configurable jusqu’à 1GB par l’utilisateur)Firefox 405120 k5120 kNon limité 250MB ‘3Sans limite (autorisation utilisateur) blobs >50 Mo) Les unités sont le nombre de caractères (octets) Test utilisés localement et sessionStorage : http://dev-test.nemikor.com/web-storage/support-test/

Compatibilité des navigateurs
#

FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)localStorage43.5810.504sessionStorage52810.504Cache d’application4.03.510.010.64.0IndexéDb2310IE10157.1FileApi313110257.1

Dans ce cas, nous nous sommes concentrés sur les navigateurs de bureau, mais sur les sites mentionnés ci-dessus, nous avons pu obtenir des informations sur les navigateurs mobiles

Exemples
#

Ici, nous pouvons voir quelques exemples de ces technologies ensemble

En savoir plus
#

Pas de normes / décesses (Non recommandé)
#

globalStorage
#

Il s’agit d’un objet global qui maintient plusieurs zones de stockage privées pouvant être utilisées pour stocker des données sur une longue période.

webSQL
#

C’est une technologie similaire à IndexedDB mais elle a été dépréciée le 18 novembre 2010 http://www.w3.org/TR/webdatabase/

userDataBehavior
#

Il permettait un stockage très limité, n’est compatible qu’avec IE et est obsolète par rapport à IE10

À la prochaine !

Articles connexes