OWF12/HTML 5 local storage , olivier thomas, cto at webtyss

1 049 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 049
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

OWF12/HTML 5 local storage , olivier thomas, cto at webtyss

  1. 1. Stockage local dans les navigateurs
  2. 2. ● Olivier Thomas● CTO, Webtyss● othomas@webtyss.com● @webtyss
  3. 3. Pourquoi du stockage local ?● Des WebApps, pas de "simples" sites Web... ● Proposer une expérience utilisateur identique, avec ou sans connexion● Indispensable pour rivaliser avec les applications natives● La gestion du offline, primordiale pour les applis mobiles
  4. 4. Les différents types de stockage● Stockage local de données utilisateurs ● Cookies ● Local Storage (également appelé Web Storage, HTML 5 Storage ou Dom Storage) ● Web SQL Database (WebDB) ● IndexedDB● Caching ● Stockage de pages et ressources associées
  5. 5. Les challenges du stockage local des données● De la capacité !● De la persistence, au-delà des refresh de page!● Une manipulation des données à la fois puissante et souple pour lutilisateur● Laisser à lutilisateur le libre choix sur les données à échanger avec le serveur
  6. 6. Cookies● Stockage de petites quantités d’informations sous un format clé/valeur● Cookies de sessions vs Cookies persistents ● Utilisation de l’attribut “expires”● Max 4KB de données par cookie et 20 cookies par domaine● Les cookies transitent systématiquement entre le navigateur et le site --> overhead
  7. 7. Manipulation des cookies● Option 1 : Manipulation des cookies au niveau de l’enveloppe HTTP ● Poser un cookie Set-Cookie : NOM=VALEUR; domain=NOM_DE_DOMAINE; expires=DATE● Option 2 : Manipulation des cookies au niveau javascript ● Utilsation de l’objet document.cookie ● var expire = new Date(); var unAn = expire.getTime() + (365*24*60*60*1000); expire.setTime(unAN); document.cookie = "JDNCookie=Test; expires=" + expire.toGMTString();
  8. 8. Implémentation "Local Storage"● Stockage de données au format "Clé / Valeur"● Les avantages : ● Un stockage réellement persistent ● Une API très simple à utiliser ● Mécanisme dévénements pour intercepter les modifications effectuées sur lespace de stockage
  9. 9. Local Storage● Les limitations ● Plus grande capacité de stockage que les cookies mais limitation à 5MB par domaine ● Stockage de données de nimporte quel type mais sous forme de chaînes --> Sérialisation et Désérialisation nécessaires ! ● Un mode de stockage peu propice aux structures de données complexes
  10. 10. Local Storage - Code● Laccès au stockage local seffectue par lobjet window.localStorage● Des méthodes simples de manipulation de données ● clear() ● getItem() ● value = window.localStorage.getItem(key) ● setItem() ● window.localStorage.setItem(key, value) ● removeItem ● Key
  11. 11. Local Storage - itérationDisponibilité dune fonction lengthfor (var i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); var value = localStorage.getItem(key); }
  12. 12. Local Storage - EvénementsAjout dun listener sur lévénement storagewindow.addEventListener("storage", function(event) { var key = event.key; var newValue = event.newValue; var oldValue = event.oldValue; var url = event.url; var storageArea = event.storageArea; // handle the event });
  13. 13. Local Storage : détecter si la fonctionnalité est supportéeManuellement ou via lutilisation de script spécialisé (ex: Modernizr)if (Modernizr.localstorage) { // window.localStorage is available! } else { // no native support for local storage :( }
  14. 14. Local Storage - Navigateurs supportés● Local Storage est aujourdhui supporté par lensemble des navigateurs fixes et mobiles.
  15. 15. Web SQL Database● Toute la puissance (et les inconvénients) dune base de données relationnelle dans le navigateur● Taille de stockage bien supérieure à 5MB (potentiellement jusquà 1GB)● La plupart des implémentations reposent sur SQLLite● Implémentation supportée par les navigateurs mobiles
  16. 16. WebSQL - Normalisation
  17. 17. Web SQL Database - Ouverture de BDDvar db = window.openDatabase( "MyDB", "", "My super database", 1024);
  18. 18. Web SQL Database Vérification de la versionGérer les versions de la base et la création des tablesif (db.version != "1") { db.changeVersion(db.version, "1", function(tx) { // Users first visit. Initialize database. var tables = [ { name: "users", columns: ["id INTEGER PRIMARY KEY", "name TEXT"]}, { name: "groups", columns: ["id INTEGER PRIMARY KEY", "name TEXT"]}, { name: "users_groups", columns: ["userId INTEGER", "groupId INTEGER", date TEXT"]} ]; for (var index = 0; index < tables.length; index++) { var table = tables[index]; tx.executeSql("CREATE TABLE " + table.name + "(" + table.columns.join(", ") + ");"); } }, null, function() {loadData(db);} );}else { // User has been here before, no initialization required. loadData(db);}
  19. 19. WebDatabase : insertion de donnéesdb.transaction(function(tx) { for (var index = 0; index < myTable.length; index++) { var myValue = myTable[index]; tx.executeSql("INSERT INTO users (name) VALUES (:name);", [myValue], function(tx, results) { // Do something here after the insert }); }});
  20. 20. WebDatabase : lecture denregistrementsdb.readTransaction( function(tx) { tx.executeSql("SELECT * FROM users", function(tx, results) { var rows = results.rows; for (var index = 0; index < rows.length; index++) { var item = rows.item(index); var element = document.createElement("div"); element.textContent = item.name; document.getElementById("usersList").appendChild(element); } }); });
  21. 21. WebDatabase : support des navigateurs● Fonctionnalité non supportée par Firefox● A venir dans IE
  22. 22. IndexedDB● Une alternative à WebDB avec les mêmes objectifs : fournir une solution de stockage local avancé pour les applications HTML5● Repose sur une implémentation "NoSQL" basée sur un concept de "DataStore"● Lensemble des accès est asynchrone
  23. 23. IndexedDB - CodeOuverture de la base et vérification de la versionvar request = window.indexedDB.open("MyDB“, "My great database");request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // Users first visit, initialize database. var createdObjectStoreCount = 0; var objectStores = [ { name: "users", keyPath: "id", autoIncrement: true }, { name: "groups", keyPath: "id", autoIncrement: true }, { name: "users_groups", keyPath: "", autoIncrement: true } ]; function objectStoreCreated(event) { if (++createdObjectStoreCount == objectStores.length) { db.setVersion("1").onsuccess = function(event) { loadData(db);}; } } for (var index = 0; index < objectStores.length; index++) { var params = objectStores[index]; request = db.createObjectStore(params.name, params.keyPath, params.autoIncrement); request.onsuccess = objectStoreCreated; } } else { loadData(db); }};
  24. 24. IndexedDB : insertion de donnéesvar request = window.indexedDB.open("MyDB", "My great database");request.onsuccess = function(event) { var objectStore = event.result.objectStore("users"); for (var index = 0; index < users.length; index++) { var user = users[index]; objectStore.add(user).onsuccess = function(event) { document.getElementById("display").textContent = "Saved recordfor " + user.name + " with id " + event.result; }; }};
  25. 25. indexedDB : lecture denregistrementsvar request = window.indexedDB.open("MyDB", "My great database");request.onsuccess = function(event) { // Enumerate the entire object store. request = event.result.objectStore("users").openCursor(); request.onsuccess = function(event) { var cursor = event.result; // If cursor is null then weve completed the enumeration. if (!cursor) { return; } var element = document.createElement("div"); element.textContent = cursor.value.name; document.getElementById("usersList").appendChild(element); cursor.continue(); };};
  26. 26. indexedDB : Browser support
  27. 27. Synthèse : support des browsers source : http://www.html5rocks.com/en/features/storage
  28. 28. Wrappers javascript● Lawnchair : ● une interface unifiée qui supporte les différentes implémentations● IndexedDB Polyfill ● Wrapper IndexedDB autour de WebSQL
  29. 29. Stockage des pages et ressources associées dans le navigateur● Utilisation dun fichier "Manifest" permettant de décrire le comportement des ressources● Un seul fichier Manifest à la racine de la WebApp, toutes les pages de la WebApp pointant sur ce fichier
  30. 30. Structure dun fichier Manifest● Un MIME Type spécfique: text/cache-manifest● Utilisation d’une extension “ .appcache”● Header dun fichier manifest : CACHE MANIFEST● 3 sections : ● CACHE : liste les ressources devant être obligatoirement mises en cache ● NETWORK : liste les ressources nécessitant obligatoirement dêtre connecté. La wilcard * permet dajouter au cache les ressources référencées sur dautres domaines ● FALLBACK : liste les ressources à afficher lorsque la page consultée en offline nest pas dans le cache
  31. 31. Exemple de fichier ManifestCACHE MANIFEST # rev 42NETWORK: /tracking.cgiCACHE: /clock.css /clock.js /clock-face.jpgFALLBACK:/ /pageNotFound.html
  32. 32. Manipulation du cache par Javascript● Différents événements renvoyés lorsque le navigateur lit lanifeste● Accès programmatique au cache : window.applicationCachevar appCache = window.applicationCache;appCache.update();if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache();}
  33. 33. Trucs et astuces sur AppCache● Utilisez des outils de génération automatique du Manifeste (ex: HTML5 BoilerPlate)● En mode développement, configurez votre serveur Web pour un TTL de 0 pour servir le fichier Manifeste.● Possibilité de voir le contenu du cache ● Sous Chrome : chrome:appcache-internals
  34. 34. Détection des modes offline / online● fonction navigator.online() ● permet de détecter si le navigateur est connecté● Evénements : ● document.body.addEventListener("online", function () {...} ● document.body.addEventListener("offline", function () {...}● Attention, navigator.online() renvoie true dès qu’on est connecté à un réseau mais sans nécessairement de connexion internet ● Possibilité d’implémenter un polling par xmlHTTPRequest

×