web:html5:indexeddb
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
web:html5:indexeddb [2014/12/10 03:17] – [Mise à jour] sgariepy | web: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' | ||
+ | * 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:// | Le mieux, pour ne pas avoir des informations désuètes, car cela évolue toujours, c'est de se référer à [[http:// | ||
+ | Quelques outils qui peuvent aider à supporter IndexedDB sur plusieurs plateformes : | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
====== Opérations ====== | ====== Opérations ====== | ||
+ | |||
+ | ===== Cycle d' | ||
+ | |||
+ | Quand on fait une requête d' | ||
+ | |||
+ | {{: | ||
===== Ouvrir une base de données ===== | ===== Ouvrir une base de données ===== | ||
Ligne 99: | Ligne 119: | ||
==== Insertion ==== | ==== Insertion ==== | ||
+ | |||
+ | L' | ||
<code javascript> | <code javascript> | ||
Ligne 113: | Ligne 135: | ||
modifiedDate: | modifiedDate: | ||
}; | }; | ||
- | |||
var transaction = db.instance.transaction([db.storeNames.courses], | var transaction = db.instance.transaction([db.storeNames.courses], | ||
- | var | + | var 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(' | console.log(' | ||
console.log(' | console.log(' | ||
- | $('# | ||
}; | }; | ||
- | |||
</ | </ | ||
==== Lecture ==== | ==== Lecture ==== | ||
+ | |||
+ | La lecture d'un objet dans la base de données utilise la méthode '' | ||
Pour des raisons de performance, | Pour des raisons de performance, | ||
Ligne 157: | Ligne 177: | ||
==== Mise à jour ==== | ==== Mise à jour ==== | ||
- | La mise à jour est en fait une combinaison d'un '' | + | La mise à jour est en fait une combinaison d'un '' |
<code javascript> | <code javascript> | ||
Ligne 190: | Ligne 210: | ||
==== Suppression ==== | ==== Suppression ==== | ||
+ | |||
+ | La suppression d'un objet dans la base de données utilise la méthode '' | ||
<code javascript> | <code javascript> | ||
Ligne 204: | Ligne 226: | ||
}; | }; | ||
</ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ====== 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 '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | var store = newVersion.createObjectStore(' | ||
+ | store.createIndex(' | ||
+ | store.createIndex(' | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Range ===== | ||
+ | |||
+ | Les fonctions sont disponibles sur l' | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | On crée un //range// avec '' | ||
+ | <code javascript> | ||
+ | var range = IDBKeyRange.upperBound(lastName); | ||
+ | </ | ||
+ | |||
+ | Ensuite, on ouvre le curseur avec '' | ||
+ | |||
+ | <code javascript> | ||
+ | request = index.openCursor(range, | ||
+ | </ | ||
+ | |||
+ | Les directions peuvent être '' | ||
+ | |||
+ | |||
+ | ===== Clés ===== | ||
+ | |||
+ | Il y a plusieurs façons de déterminer la clé (//key//) des objets: | ||
+ | * '' | ||
+ | * '' | ||
+ | * 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é. | ||
+ | |||
+ | |||
+ | ===== keyPath ===== | ||
+ | |||
+ | Une solution pour régler le problème de l' | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | newVersion.createObjectStore( | ||
+ | ' | ||
+ | keyPath: ' | ||
+ | autoIncrement: | ||
+ | } | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Le keyPath peut être différent et il n'est pas nécessaire d' | ||
+ | |||
+ | <code javascript> | ||
+ | newVersion.createObjectStore( | ||
+ | ' | ||
+ | keyPath: ' | ||
+ | } | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | UUID | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====== Librairies JavaScript pour IndexedDB ====== | ||
+ | |||
+ | Plusieurs librairies existent pour palier aux problèmes d' | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
Ligne 212: | Ligne 338: | ||
* http:// | * http:// | ||
+ | ====== Sources ====== | ||
+ | * PluralSight HTML5 Web Storage, IndexedDB and File System. | ||
web/html5/indexeddb.1418177831.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)