Premiers pas avec indexeddb

Aperçu

IndexedDB est une API de bas niveau pour le stockage côté client de quantités importantes de données structurées, y compris des fichiers/blobs. Cette API utilise des index pour permettre des recherches hautes performances de ces données. Bien que le stockage Web soit utile pour stocker de petites quantités de données, il est moins utile pour stocker de plus grandes quantités de données structurées. La norme IndexedDB a été créée pour permettre un stockage et une récupération évolutifs et performants d’objets Javascript dans un navigateur.

Bases

indexedDB est conçu pour stocker des littéraux d’objet Javascript tels que {prop1 : valeur, prop2 : valeur}. De plus, des implémentations plus récentes prennent en charge le stockage d’objets binaires volumineux (BLOB), tels que des images, des fichiers audio et des fichiers vidéo. De plus, indexedDB peut stocker des objets qui contiennent d’autres objets (objets imbriqués), tels que {prop1 : valeur, prop2 : {nestedprop1 : valeur, nestedprop2 : valeur}}.

Voici quelques concepts de base :

  • Base de données : un conteneur de magasins d’objets et d’index. Chaque base de données a un nom et une version.
  • Magasin d’objets : un conteneur d’objets. Ceci est analogue à une table dans une base de données relationnelle. Dans indexedDB, les enregistrements correspondent aux objets Javascript et les colonnes correspondent aux propriétés des objets Javascript. Les objets ajoutés au magasin sont stockés dans l’ordre d’ajout. Les requêtes sur le magasin récupèrent les objets dans le même ordre. Vous pouvez insérer, mettre à jour ou supprimer des objets dans une librairie.
  • Index : un conteneur spécial pour des objets spécifiques contenus dans un magasin d’objets. Les index sont également analogues aux tables et peuvent être compris comme des magasins d’objets avec des contraintes spéciales. Lorsqu’un objet est inséré dans un magasin d’objets, il peut, s’il répond à certains critères, être également inséré dans un magasin d’index correspondant. Les objets d’un index sont stockés dans un ordre défini par l’index. Les requêtes sur un index récupèrent les objets dans l’ordre défini par l’index (bien que les requêtes puissent être configurées pour fonctionner différemment). Vous ne pouvez pas insérer, mettre à jour ou supprimer des objets dans un index (vous ne pouvez le faire qu’indirectement en insérant l’objet dans le magasin sur lequel l’index est basé).
  • Curseur : les curseurs sont analogues aux requêtes. Un curseur parcourt les objets d’un magasin d’objets ou d’un index. Les curseurs peuvent avancer ou reculer, rechercher (sauter ou avancer au-delà des objets) et passer à l’objet « unique » suivant ou précédent dans le magasin/index sous-jacent.
  • Chemin de clé : les chemins de clé sont analogues aux clés primaires (ou clés primaires composées) d’une table dans une base de données relationnelle. Dans le cas général, lorsque vous demandez à indexedDB de créer un magasin d’objets dans une base de données particulière, vous définissez également le chemin de la clé pour le magasin. Vous pouvez utiliser le chemin d’accès à la clé pour obtenir rapidement un objet particulier, ce qui revient à utiliser une clé primaire pour sélectionner un enregistrement dans une table relationnelle. Vous pouvez éventuellement utiliser des clés pour vous assurer que les tentatives ultérieures d’insertion d’un objet dans un magasin d’objets contenant déjà un objet avec la même clé produiront une erreur.
  • Transactions et requêtes : les requêtes sont analogues à des requêtes SQL individuelles. Il existe des méthodes API spécifiques pour insérer un objet, supprimer un objet, mettre à jour un objet et itérer sur un ou plusieurs objets. Chaque appel de méthode correspond à une seule requête. Chaque demande se produit dans le contexte d’une transaction. En d’autres termes, plusieurs demandes peuvent se produire dans une transaction. Les demandes individuelles peuvent échouer pour diverses raisons. Lors de l’exécution de plusieurs demandes dans une seule transaction, les demandes ne sont pas entièrement validées tant que toutes les demandes ne sont pas considérées comme réussies. De cette manière, si un problème survient dans une demande ultérieure, la transaction entière peut être “annulée” de sorte que l’état du magasin d’objets sous-jacent soit le même qu’il était avant l’apparition de la première demande dans la transaction.

Asynchrone vs Sync

L’API Javascript d’indexedDB utilise des techniques asynchrones. Lorsqu’elle interagit directement avec l’API, et non avec une bibliothèque tierce de niveau supérieur, l’API nécessite l’utilisation de rappels Javascript. La conception asynchrone permet d’éviter que des opérations de traitement de données plus importantes ne bloquent le thread Javascript principal, ce qui permet d’empêcher l’interface utilisateur (ce que vous voyez dans le navigateur) d’apparaître figée/saccadée/laggy.

Soutien

Visitez http://caniuse.com/#feat=indexeddb.

Apprendre encore plus

  • [Article sur l’utilisation d’IndexedDB sur MDN][1]

  • [Spécification W3] [2]

  • [Exemple sur html5rocks.com][3]. (Attention : cet exemple est obsolète, par exemple il utilise setVersion au lieu de onupgradeneeded, et il se peut donc qu’il ne fonctionne pas dans les navigateurs modernes.)

[1] : https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB [2] : http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html [3] : http://www.html5rocks.com/en/tutorials/indexeddb/todo/

Installation ou configuration

Instructions détaillées sur la configuration ou l’installation d’indexeddb.

Schéma de base de données indexé

[![Schéma IndexedDB][1]][1]

Comme on peut le voir sur l’image ci-dessus, sur une seule application on peut créer :

  • Plusieurs bases de données
  • Chaque base de données peut avoir plusieurs magasins d’objets (tables)
  • Chaque magasin d’objets peut avoir stocké plusieurs objets

[1] : https://i.stack.imgur.com/zGJPJ.png

Présentation de la demande de base de données indexée

[![entrez la description de l’image ici][2]][2]

Comme on peut le voir sur l’image ci-dessus, dans la base de données indexée afin d’accéder aux données dont vous avez besoin :

  1. Ouvrez une connexion à la base de données souhaitée
  2. Ouvrir une transaction qui peut être en lecture seule ou en lecture écriture
  3. Ouvrez un curseur ou un index qui peut être utilisé pour filtrer les données
  4. Dans la demande de curseur - événement onsuccess, vous pouvez accéder à vos données

[2] : https://i.stack.imgur.com/2XiLu.png