Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste : • indexeddb • toc • jq
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
web:html5:indexeddb [2014/12/10 03:13] – sgariepyweb:html5:indexeddb [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
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 ======
- +
- +
- +
- +
-===== Caractéristiques =====+
  
   * API Asynchrone   * API Asynchrone
Ligne 19: Ligne 15:
  
  
-==== 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]].
  
 +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 ====== ====== Opérations ======
  
-==== Ouvrir une base de données ====+===== 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 =====
  
 <code javascript> <code javascript>
Ligne 54: Ligne 70:
  
  
-==== Supprimer une base de données ====+===== Supprimer une base de données =====
  
 <code javascript> <code javascript>
Ligne 74: 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 102: 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 117: 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 130: 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 159: 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 191: 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 206: 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 214: 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.1418177583.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)