Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Stockage local dans les navigateurs
●   Olivier Thomas●   CTO, Webtyss●   othomas@webtyss.com●   @webtyss
Pourquoi du stockage local ?●   Des WebApps, pas de "simples" sites Web...    ●   Proposer une expérience utilisateur iden...
Les différents types de stockage●   Stockage local de données utilisateurs    ●   Cookies    ●   Local Storage (également ...
Les challenges du stockage local                      des données●   De la capacité !●   De la persistence, au-delà des re...
Cookies●   Stockage de petites quantités d’informations sous un format    clé/valeur●   Cookies de sessions vs Cookies per...
Manipulation des cookies●   Option 1 : Manipulation des cookies au niveau de l’enveloppe    HTTP    ●   Poser un cookie   ...
Implémentation "Local Storage"●   Stockage de données au format "Clé / Valeur"●   Les avantages :    ●   Un stockage réell...
Local Storage●   Les limitations    ●   Plus grande capacité de stockage que les cookies mais limitation à 5MB        par ...
Local Storage - Code●   Laccès au stockage local seffectue par lobjet    window.localStorage●   Des méthodes simples de ma...
Local Storage - itérationDisponibilité dune fonction lengthfor (var i = 0; i < localStorage.length; i++) {     var key = l...
Local Storage - EvénementsAjout dun listener sur lévénement storagewindow.addEventListener("storage", function(event) {   ...
Local Storage : détecter si la               fonctionnalité est supportéeManuellement ou via lutilisation de script spécia...
Local Storage - Navigateurs                         supportés●   Local Storage est aujourdhui supporté par lensemble des  ...
Web SQL Database●   Toute la puissance (et les inconvénients) dune base de    données relationnelle dans le navigateur●   ...
WebSQL - Normalisation
Web SQL Database - Ouverture de                   BDDvar db = window.openDatabase(  "MyDB",  "",  "My super database",  10...
Web SQL Database                                Vérification de la versionGérer les versions de la base et la création des...
WebDatabase : insertion de                           donnéesdb.transaction(function(tx) {  for (var index = 0; index < myT...
WebDatabase : lecture                   denregistrementsdb.readTransaction(        function(tx) {                  tx.exec...
WebDatabase : support des                 navigateurs●   Fonctionnalité non supportée par Firefox●   A venir dans IE
IndexedDB●   Une alternative à WebDB avec les mêmes objectifs : fournir une    solution de stockage local avancé pour les ...
IndexedDB - CodeOuverture de la base et vérification de la versionvar request = window.indexedDB.open("MyDB“, "My great da...
IndexedDB : insertion de donnéesvar request = window.indexedDB.open("MyDB", "My great database");request.onsuccess = funct...
indexedDB : lecture                           denregistrementsvar request = window.indexedDB.open("MyDB", "My great databa...
indexedDB : Browser support
Synthèse : support des browsers               source : http://www.html5rocks.com/en/features/storage
Wrappers javascript●   Lawnchair :    ●   une interface unifiée qui supporte les différentes implémentations●   IndexedDB ...
Stockage des pages et ressources              associées dans le navigateur●   Utilisation dun fichier "Manifest" permettan...
Structure dun fichier Manifest●   Un MIME Type spécfique: text/cache-manifest●   Utilisation d’une extension “ .appcache”●...
Exemple de fichier ManifestCACHE MANIFEST  # rev 42NETWORK:  /tracking.cgiCACHE:  /clock.css  /clock.js  /clock-face.jpgFA...
Manipulation du cache par                             Javascript●   Différents événements renvoyés lorsque le navigateur l...
Trucs et astuces sur AppCache●   Utilisez des outils de génération automatique du Manifeste (ex:    HTML5 BoilerPlate)●   ...
Détection des modes offline / online●   fonction navigator.online()    ●   permet de détecter si le navigateur est connect...
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
Nächste SlideShare
Wird geladen in …5
×

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

1.166 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×