IndexedDB JavaScript
IndexedDB est une API de stockage côté client puissante, plus robuste que les autres solutions de stockage local disponibles dans les navigateurs web. Elle permet de stocker et de manipuler de grandes quantités de données structurées de manière asynchrone par les applications web. IndexedDB est idéal pour les applications nécessitant un stockage de données hors ligne, des performances élevées et des capacités de requêtage riches, sans dépendre d'une connexion réseau.
Configurer une base de données IndexedDB
Étape 1 : Ouvrir une base de données
Pour utiliser IndexedDB, la première étape consiste à ouvrir une base de données. Voici comment vous pouvez créer ou ouvrir une base de données IndexedDB. Après une opération réussie, nous fermons la base de données pour éviter tout effet secondaire indésirable dans les autres exemples. Vous pouvez sauter cette étape dans votre propre code, ou l'inclure si nécessaire.
Avertissement : Appeler deleteDatabase() effacera toutes les données de cette base de données. Ceci est uniquement à des fins de test et ne doit pas être utilisé en production.
Étape 2 : Création de magasins d'objets
Une fois la base de données ouverte, vous pouvez procéder à la création d'un magasin d'objets, qui est analogue à une table dans les bases de données relationnelles. Notez que cela ne peut être fait que lors d'une mise à jour de version (lors de l'ouverture de la base de données avec un numéro de version supérieur). L'événement à écouter est onupgradeneeded.
Transactions
Une fois votre base de données et vos magasins d'objets configurés, vous devrez gérer les opérations de données à l'aide de transactions. Une transaction dans IndexedDB est un mécanisme qui regroupe plusieurs opérations en une seule unité de travail qui réussit complètement ou échoue complètement. Elle est essentielle pour garantir la cohérence et l'intégrité des données, en particulier lorsque plusieurs opérations dépendent les unes des autres pour produire un résultat correct.
Comment utiliser les transactions dans IndexedDB
Étape 1 : Démarrer une transaction
Pour effectuer une opération dans IndexedDB, commencez par créer une transaction sur une base de données. Une transaction est créée en spécifiant quels magasins d'objets elle impliquera et le mode de la transaction, qui peut être soit "readonly" soit "readwrite".
Étape 2 : Accéder à un magasin d'objets
Au sein d'une transaction, vous pouvez accéder à un ou plusieurs magasins d'objets pour effectuer des opérations sur les données.
Étape 3 : Exécuter des opérations
Une fois que vous avez accès à un magasin d'objets, vous pouvez exécuter diverses opérations telles que l'ajout, la récupération, la mise à jour ou la suppression de données. Chaque opération renvoie un objet de requête que vous pouvez utiliser pour gérer les événements de succès ou d'erreur.
Étape 4 : Terminer la transaction
Une transaction se terminera automatiquement une fois que toutes les opérations émises auront été résolues, que ce soit par succès ou par échec. Vous pouvez également écouter l'événement complete sur la transaction pour effectuer des actions après la réussite de toutes les opérations.
Voici un exemple de transaction complète :
Lecture des données
Pour récupérer des données, utilisez store.get(key) ou un curseur pour itérer sur plusieurs enregistrements. Voici quelques exemples rapides :
Récupération d'un seul enregistrement :
Itération avec un curseur :
Mise à jour et suppression d'enregistrements
Pour modifier des données existantes, utilisez store.put() avec la même clé. Pour supprimer des données, utilisez store.delete(key).
Mise à jour d'un enregistrement :
Suppression d'un enregistrement :
Comment afficher le contenu d'IndexedDB dans votre navigateur
Après avoir stocké et manipulé des données, vous souhaiterez peut-être inspecter ce qui est réellement sauvegardé dans votre navigateur. La plupart des navigateurs modernes vous indiquent ce qui est stocké dans IndexedDB. Voici un exemple issu des outils de développement de Chrome :
Bonnes pratiques pour l'utilisation des transactions
Pour garantir que votre implémentation IndexedDB reste fiable et performante, suivez ces directives :
- Minimiser la portée : Gardez les transactions aussi petites que possible, tant en nombre d'opérations qu'en durée. Cela réduit les risques de conflits et améliore les performances.
- Gestion des erreurs : Implémentez toujours une gestion des erreurs aux niveaux de la requête et de la transaction. Cela aide à diagnostiquer les problèmes et à prévenir les mises à jour partielles qui pourraient entraîner une corruption des données.
- Concurrence : Comprenez que bien qu'IndexedDB soit asynchrone et non bloquant, les transactions sur la même base de données sont mises en file d'attente et exécutées de manière séquentielle pour éviter les conditions de concurrence et les incohérences.
Conclusion
IndexedDB offre une plateforme robuste pour la gestion complexe des données dans les applications web, ce qui en fait un outil essentiel pour les développeurs web modernes. Grâce à une implémentation appropriée de ses fonctionnalités, les développeurs peuvent stocker, récupérer, mettre à jour et supprimer efficacement les données côté client, améliorant ainsi les performances de l'application et l'expérience utilisateur.
Pratique
Quelles sont les caractéristiques d'IndexedDB en JavaScript ?