IndexedDB

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Ce document est en cours de traduction

IndexedDB est une API de stockage côté client qui permet de gérer des quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des indexes afin de permettre recherches performantes sur ces données. Alors que le stockage DOM est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB répond à ce besoin. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.

Note : Cette fonctionnalité est disponible via les Web Workers.

Note: l'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans certains cas. Si vous préferez une API plus simple, essayez localForage et dexie.js qui rendent IndexedDB plus conviviale.

Note: Certains anciens navigateurs ne supportent pas IndexedDB mais supportent WebSQL. Un moyen de contourner ce problème est d'utiliser un Polyfill ou Shim IndexedDB qui se retourne sur WebSQL ou même sur localStorage en cas d'absence de support par le navigateur web. Le meilleur polyfill actuellement disponible est localForage.

Concepts clés et utilisation

IndexedDB est un sytème de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orienté objet pour JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une clef; tout objet supporté par l'algorithme de copie structuré peut être stocké. Vous devez spécifier le schéma de la base de données, y ouvrir une connexion, puis récupérer et mettre à jour des données dans une série de transactions.

Note: Comme beaucoup de solutions de stockage en ligne, IndexedDB suit la politique  same-origin policy. Alors même si vous pouvez accèder aux données stockées au sein d'un domaine, vous ne pouvez pas accèder accèder aux données entre des domaines différents.

 

Synchrone et asynchrone

Les opérations effectuées par IndexedDB sont réalisées de manière asynchrones, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les Web workers, mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.

Limites de stockage et critères d'expulsion

Il y a un certain nombre de technologies web qui stockent des données d'un type ou d'un autre du côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et diffère entre les différents navigateurs. L'article "limites de stockage des navigateurs et critères d'expulsion" tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.

Interfaces

Pour accèder à une base de donnée, il faut apeller open() sur l'attribut indexedDB d'un objet window. Cette méthode retourne un objet IDBRequest; asynchronous operations communicate to the calling application by firing events on IDBRequest objects.

Se connecter à la base de données

IDBEnvironment
Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets window et worker.
IDBFactory
Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global indexedDB et c'est donc le point d'entrée de l'API.
IDBOpenDBRequest
Représente une requête d'ouverture de la base de données.
IDBDatabase
Représente une connexion à la base de données. C'e'st le seul moyen d'obtenir une transaction sur la base de données.

Récupérer et modifier les données

IDBTransaction
Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).
IDBRequest
Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.
IDBObjectStore
Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.
IDBIndex
Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de IDBObjectStore.
IDBCursor
Itérateur sur les magasins d'objets et les index.
IDBCursorWithValue
Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.
IDBKeyRange
Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.
IDBLocaleAwareKeyRange
Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir createIndex()'s optionalParameters).

Interfaces d'événements personnalisés

Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:

IDBVersionChangeEvent
L'interface IDBVersionChangeEvent indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  IDBOpenDBRequest.onupgradeneeded.

Interfaces obsolètes

Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit:

IDBVersionChangeRequest
Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de IDBFactory.open sans aussi appeler IDBDatabase.setVersion), et l'interface  IDBOpenDBRequest a désormais la fonction de l'ancienne (supprimée) IDBVersionChangeRequest.
IDBDatabaseException 
Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.
IDBTransactionSync
Version synchrone de IDBTransaction.
IDBObjectStoreSync
Version synchrone de IDBObjectStore.
IDBIndexSync
Version synchrone de  IDBIndex.
IDBFactorySync
Version synchrone de IDBFactory.
IDBEnvironmentSync
Version synchrone de IDBEnvironment.
IDBDatabaseSync
Version synchrone de IDBDatabase.
IDBCursorSync
Version synchrone de IDBCursor.

Exemple

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base

23.0 webkit
24

10.0 (10.0) moz
16.0 (16.0)
10, partial 15 7.1
Disponibilité dans les workers (Oui) 37.0 (37.0)[1] Pas de support[3] (Oui) Pas de support[4]
IDBLocaleAwareKeyRange Pas de support 43.0 (43.0)[2] Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Firefox OS IE (téléphone) Opera Mobile Safari Mobile
Support de base 4.4 22.0 (22.0) 1.0.1 10 22 8
Disponibilité dans les workers (Oui) 37.0 (37.0)[1] (Oui) ? (Oui) ?
IDBLocaleAwareKeyRange Pas de support 43.0 (43.0)[2] 2.5[2] Pas de support Pas de support Pas de support
  • [1] IDBCursorWithValue n'est pas disponible dans les workers jusqu'à Gecko 42.0 (Firefox 42.0 / Thunderbird 42.0 / SeaMonkey 2.39).
  • [2] Cette fonctions est actuellement cachée — pour l'activer et l'experimenter, aller dans about:config et activer dom.indexedDB.experimental.
  • [3] IE/Edge bug #866495
  • [4] WebKit bug #149953

Voir aussi

  • localForage: Un Polyfill fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.
  • dexie.js: Un wrapper pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.

 

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : onra87, SphinxKnight, JeffD, P45QU10U, Caudralys, moins52
 Dernière mise à jour par : onra87,