Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste : • toc • linux • entity_framework_core • toc
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:16] – [Lire] sgariepyweb:html5:indexeddb [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 20: Ligne 20:
  
 ===== 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 ======
 +
 +===== 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 =====
Ligne 99: Ligne 119:
  
 ==== Insertion ==== ==== Insertion ====
 +
 +L'insertion d'un objet dans la base de données utilise la méthode ''add()''.
  
 <code javascript> <code javascript>
Ligne 113: 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 126: 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>
  
 ==== Lecture ==== ==== 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 156: Ligne 176:
  
 ==== 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 188: Ligne 210:
  
 ==== Suppression ==== ==== Suppression ====
 +
 +La suppression d'un objet dans la base de données utilise la méthode ''delete()''.
  
 <code javascript> <code javascript>
Ligne 202: 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 210: 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.1418177765.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)