Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste :
web:html5:indexeddb

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
Dernière révisionLes deux révisions suivantes
web:html5:indexeddb [2014/12/10 03:12] – [Capacity] sgariepyweb:html5:indexeddb [2015/05/26 01:28] – [Support des navigateurs] sgariepy
Ligne 3: Ligne 3:
 ====== IndexedDB ====== ====== IndexedDB ======
  
 +IndexedDB permet de stocker des données localement au niveau du client.  Ce stockage peut être utile par exemple en mode itinérance, là où l'accès à un réseau n'est pas toujours possible.
  
  
- +====== Caractéristiques ======
-===== Event Lifecycle ===== +
- +
- +
- +
-===== Caractéristiques =====+
  
   * API Asynchrone   * API Asynchrone
Ligne 18: Ligne 14:
   * Sandboxed Data   * Sandboxed Data
  
-==== Capacité ====+ 
 +===== Capacité =====
  
 Dans la spécification du W3C, il n'y a pas de précision sur la capacité.  En règle générale, on peut s'attendre à une limite de 50 mo qui peut être augmentée avec la permission de l'utilisateur.  Chrome, par exemple, ne demande pas de permission. Dans la spécification du W3C, il n'y a pas de précision sur la capacité.  En règle générale, on peut s'attendre à une limite de 50 mo qui peut être augmentée avec la permission de l'utilisateur.  Chrome, par exemple, ne demande pas de permission.
  
 ===== Support des navigateurs ===== ===== Support des navigateurs =====
 +
 +IndexedDB est supporté, au moment d'écrire ceci, par :
 +  * Chrome
 +  * Firefox
 +
 +Il est moins bien supporté par :
 +  * IE
 +  * Safari
 +
  
 Le mieux, pour ne pas avoir des informations désuètes, car cela évolue toujours, c'est de se référer à [[http://caniuse.com/#feat=indexeddb|Can I Use IndexedDB]]. Le mieux, pour ne pas avoir des informations désuètes, car cela évolue toujours, c'est de se référer à [[http://caniuse.com/#feat=indexeddb|Can I Use IndexedDB]].
  
-===== Opérations =====+Quelques outils qui peuvent aider à supporter IndexedDB sur plusieurs plateformes : 
 +  * [[http://nparashuram.com/IndexedDBShim/|IndexedDB Shim]] 
 +  * [[http://pouchdb.com/|PouchDB]] 
 +  * [[http://aaronpowell.github.io/db.js/|DB.js]] 
 +  * [[http://jaydata.org/|JayData]] 
 +====== Opérations ====== 
 + 
 +===== Cycle d'événements ===== 
 + 
 +Quand on fait une requête d'ouverture à IndexedDB, on spécifie le nom de la base de données et sa version.  Si la version spécifiée est plus élevée que la version actuelle d'IndexedDB, l'événement ''onupgradeneeded'' sera lancée.  Sinon, ça ira directement au ''onsuccess''.  En cas d'erreur à tout moment, on peut aller à ''onerror''. 
 + 
 +{{:web:html5:indexeddb_event_cycle.png|}}
  
-==== Ouvrir une base de données ====+===== Ouvrir une base de données =====
  
 <code javascript> <code javascript>
Ligne 53: Ligne 70:
  
  
-==== Supprimer une base de données ====+===== Supprimer une base de données =====
  
 <code javascript> <code javascript>
Ligne 73: Ligne 90:
  
  
-==== Opérations CRUD ====+===== Opérations CRUD =====
  
 Voici un exemple de modèle de base de données : Voici un exemple de modèle de base de données :
Ligne 101: Ligne 118:
 </code> </code>
  
-=== Insertion ===+==== Insertion ==== 
 + 
 +L'insertion d'un objet dans la base de données utilise la méthode ''add()''.
  
 <code javascript> <code javascript>
Ligne 116: Ligne 135:
     modifiedDate: dt     modifiedDate: dt
 }; };
- 
  
 var transaction = db.instance.transaction([db.storeNames.courses], 'readwrite'); var transaction = db.instance.transaction([db.storeNames.courses], 'readwrite');
  
-var +var store = transaction.objectStore(db.storeNames.courses); 
-    store = transaction.objectStore(db.storeNames.courses), +var addRequest = store.add(course);
-    addRequest = store.add(course);+
  
 db.setDefaultErrorHandler(addRequest); db.setDefaultErrorHandler(addRequest);
Ligne 129: Ligne 146:
     console.log('Course added');     console.log('Course added');
     console.log('key: ' + e.target.result);     console.log('key: ' + e.target.result);
-    $('#id-box').val(e.target.result); 
 }; };
- 
 </code> </code>
  
-=== Lire ===+==== Lecture ==== 
 + 
 +La lecture d'un objet dans la base de données utilise la méthode ''get()''.
  
 Pour des raisons de performance, lorsqu'on lit des données, s'assurer d'être en mode ''readonly'' lorsqu'on instancie la transaction. Pour des raisons de performance, lorsqu'on lit des données, s'assurer d'être en mode ''readonly'' lorsqu'on instancie la transaction.
Ligne 158: Ligne 175:
 </code> </code>
  
-=== Mise à jour ===+==== Mise à jour ==== 
 + 
 +La mise à jour est en fait une combinaison d'un ''getRequest'' (méthode ''get()'') et d'un ''putRequest'' (méthode ''put()'') du même objet modifié entre les deux opérations.
  
 <code javascript> <code javascript>
Ligne 190: Ligne 209:
  
  
-=== Suppression ===+==== Suppression ==== 
 + 
 +La suppression d'un objet dans la base de données utilise la méthode ''delete()''.
  
 <code javascript> <code javascript>
Ligne 205: Ligne 226:
 }; };
 </code> </code>
 +
 +
 +
 +====== Curseurs, Index et Ranges ======
 +
 +
 +
 +===== Créer un curseur =====
 +
 +Un curseur permet de récupérer un ensemble de données. Pour créer un curseur, on utilise ''createIndex()''.
 +
 +
 +
 +
 +<code javascript>
 +var store = newVersion.createObjectStore('people', { autoIncrement: true });
 +store.createIndex('lastName', 'lastName', { unique: false });
 +store.createIndex('age', 'age', { unique: false });
 +</code>
 +
 +
 +
 +===== Range =====
 +
 +Les fonctions sont disponibles sur l'interface ''IDBKeyRange''.
 +
 +  * ''upperBound(value, open)''
 +  * ''lowerBound(value, open)''
 +  * ''bound(lowerBoundValue, upperBoundValue, openLowerBound, openUpperBound)''
 +  * ''only()''
 +
 +
 +On crée un //range// avec ''IDBKeyRange'', par exemple:
 +<code javascript>
 +var range = IDBKeyRange.upperBound(lastName);
 +</code>
 +
 +Ensuite, on ouvre le curseur avec ''openCursor(range[, direction])''.
 +
 +<code javascript>
 +request = index.openCursor(range, 'prev');
 +</code>
 +
 +Les directions peuvent être ''prev'', ''next'', ''prevunique'', ''nextunique''.
 +
 +
 +===== Clés =====
 +
 +Il y a plusieurs façons de déterminer la clé (//key//) des objets:
 +  * ''autoIncrement''
 +  * ''autoIncrement'' et un //keyPath//.
 +  * UUID
 +
 +===== AutoIncrement =====
 +
 +Avec cette façon de faire, la clé est une séquence qui est augmentée de 1 à chaque nouvel objet inséré.  La clé ''autoIncrement'' ne fait pas partie des données.  Donc, si on récupère un objet, celui-ci n'aura pas son identifiant associé avec lui.
 +
 +
 +===== keyPath =====
 +
 +Une solution pour régler le problème de l'identifiant qui ne suit pas les données, c'est d'avoir un ''autoIncrement'' avec un keyPath ''id''.
 +
 +
 +<code javascript>
 +newVersion.createObjectStore(
 +  'AutoKeyWithPath', {
 +    keyPath: 'id',
 +    autoIncrement: true
 +  }
 +);
 +</code>
 +
 +Le keyPath peut être différent et il n'est pas nécessaire d'avoir un ''autoIncrement'' avec celui-ci.  Par exemple, pour une liste d'utilisateurs, le ''keyPath'' peut être le courriel.
 +
 +<code javascript>
 +newVersion.createObjectStore(
 +  'Users', {
 +    keyPath: 'email'
 +  }
 +);
 +</code>
 +
 +{{:web:html5:email-keypath.png|}}
 +
 +
 +
 +
 +
 +UUID
 +
 +
 +
 +
 +====== Librairies JavaScript pour IndexedDB ======
 +
 +Plusieurs librairies existent pour palier aux problèmes d'IndexedDB, voici quelques exemples :
 +  * [[http://www.dexie.org/|Dexie.org]]
 +  * [[http://pouchdb.com/|PouchDB]]
 +  * [[http://aaronpowell.github.io/db.js/|db.js]]
 +
 +
 +
 +
 +
  
  
Ligne 213: Ligne 338:
   * http://labs.ft.com/2012/09/ft-style-web-app-on-firefox-and-ie6-to-ie10/   * http://labs.ft.com/2012/09/ft-style-web-app-on-firefox-and-ie6-to-ie10/
  
 +====== Sources ====== 
 +  * PluralSight HTML5 Web Storage, IndexedDB and File System.
  
web/html5/indexeddb.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1