Share
L’un des développements les plus intéressants des normes Web récemment est la spécification Indexed Database (IndexedDB en abrégé). Pour un moment de plaisir, vous pouvez lire les spécifications vous-même. Dans ce tutoriel, je vais expliquer cette fonctionnalité et, espérons-le, vous donner une inspiration pour utiliser vous-même cette fonctionnalité puissante..
En tant que spécification, IndexedDB est actuellement une recommandation candidate..
En résumé, IndexedDB vous permet de stocker de grandes quantités de données sur le navigateur de votre utilisateur. Toute application ayant besoin d’envoyer beaucoup de données par fil pourrait grandement bénéficier de la possibilité de stocker ces données sur le client. Bien sûr, le stockage n'est qu'une partie de l'équation. IndexedDB fournit également une puissante API de recherche indexée permettant de récupérer les données dont vous avez besoin..
Vous vous demandez peut-être en quoi IndexedDB est différent des autres mécanismes de stockage.?
Les cookies sont extrêmement bien pris en charge, mais ont des implications juridiques et un espace de stockage limité. En outre, ils sont envoyés au serveur à chaque demande, ce qui annule totalement les avantages du stockage côté client..
Le stockage local est également très bien pris en charge, mais limité en termes de quantité totale de stockage que vous pouvez utiliser. Le stockage local ne fournit pas une véritable API de "recherche" car les données ne sont récupérées que via des valeurs de clé. Le stockage local est idéal pour les éléments "spécifiques" que vous pouvez stocker, par exemple les préférences, alors que IndexedDB est mieux adapté aux données ad hoc (un peu comme une base de données)..
Avant d’aller plus loin, discutons honnêtement de l’état d’IndexedDB en termes de prise en charge du navigateur. À titre de spécification, IndexedDB est actuellement une recommandation candidate. À ce stade, les développeurs de la spécification en sont satisfaits, mais ils souhaitent à présent recevoir les commentaires de la communauté des développeurs. La spécification peut changer d'ici la phase finale, recommandation W3C. En général, les navigateurs prenant en charge IndexedDB le font désormais de manière assez cohérente, mais les développeurs doivent être prêts à gérer les préfixes et à prendre en compte les mises à jour ultérieures..
En ce qui concerne les navigateurs supportant IndexedDB, vous avez un dilemme. Le support est diablement bon pour le bureau, mais pratiquement inexistant pour le mobile. Voyons ce que le excellent Le site CanIUse.com dit:
Chrome pour Android prend en charge cette fonctionnalité, mais très peu de personnes utilisent actuellement ce navigateur sur des appareils Android. Est-ce que le manque de support mobile implique que vous ne devriez pas l'utiliser? Bien sûr que non! Espérons que tous nos lecteurs connaissent le concept d'amélioration progressive. Des fonctionnalités telles que IndexedDB peuvent être ajoutées à votre application de manière à ne pas pénétrer dans les navigateurs non pris en charge. Vous pouvez utiliser les bibliothèques d'encapsidation pour passer à WebSQL sur mobile ou simplement ignorer le stockage de données localement sur vos clients mobiles. Personnellement, je pense que la capacité de mettre en cache de grands blocs de données sur le client est suffisamment importante pour pouvoir être utilisée maintenant même sans support mobile..
Nous avons couvert la spécification et le support, voyons maintenant l’utilisation de la fonctionnalité. La première chose à faire est de vérifier le support IndexedDB. Bien qu'il existe des outils qui fournissent des moyens génériques de vérifier les fonctionnalités du navigateur, nous pouvons simplifier les choses plus facilement, car nous ne vérifions qu'une chose en particulier..
Accentsconagua
document.addEventListener ("DOMContentLoaded", function () if ("indexedDB" dans la fenêtre) console.log ("OUI !!! JE LE POUVE !!! WOOT !!!"); else console.log ("J'ai un triste.");, Faux); L’extrait de code ci-dessus (disponible dans test1.html si vous téléchargez le fichier zip joint à cet article) utilise le DOMContentLoaded événement à attendre pour le chargement de la page. (Ok, c’est assez évident, mais je sais que cela n’est peut-être pas familier aux personnes qui n’ont utilisé que jQuery.) Je vois alors simplement si indexedDB existe dans le répertoire. la fenêtre objet et si oui, nous sommes prêts à partir. C'est l'exemple le plus simple, mais en général, nous voudrions probablement le stocker afin de savoir ultérieurement si nous pouvons utiliser la fonctionnalité. Voici un exemple un peu plus avancé (test2.html).
var idbSupported = false; document.addEventListener ("DOMContentLoaded", function () if ("indexedDB" dans la fenêtre) idbSupported = true;, false); Tout ce que j'ai fait est créé une variable globale, idbSupported, qui peut être utilisé comme un indicateur pour voir si le navigateur actuel peut utiliser IndexedDB.
Comme vous pouvez l'imaginer, IndexedDB utilise des bases de données. Pour être clair, ce n'est pas une implémentation de SQL Server. Cette base de données est locale pour le navigateur et disponible uniquement pour l'utilisateur. Les bases de données IndexedDB suivent les mêmes règles que les cookies et le stockage local. Une base de données est unique pour le domaine à partir duquel elle a été chargée. Ainsi, par exemple, une base de données appelée "Foo" créée sur foo.com n'entrera pas en conflit avec une base de données du même nom sur goo.com. Non seulement cela n'entrera pas en conflit, mais il ne sera pas disponible pour d'autres domaines également. Vous pouvez stocker des données pour votre site Web en sachant qu'un autre site Web ne pourra pas y accéder..
L'ouverture d'une base de données se fait via la commande open. En utilisation de base, vous fournissez un nom et une version. La version est très important pour des raisons que je couvrirai plus tard. Voici un exemple simple:
var openRequest = indexedDB.open ("test", 1); Ouvrir une base de données est une opération asynchrone. Afin de gérer le résultat de cette opération, vous devez ajouter des écouteurs d'événement. Il existe quatre types d'événements pouvant être déclenchés:
Vous pouvez probablement deviner ce que le succès et l'erreur impliquent. L'événement upgradeneeded est utilisé à la fois lorsque l'utilisateur ouvre la base de données pour la première fois et lorsque vous modifiez la version. Bloqué n'est pas quelque chose qui arrivera habituellement, mais peut se déclencher si une connexion précédente n'a jamais été fermée.
En règle générale, lors de la première visite sur votre site, l'événement mis à jour se déclenche. Après cela - juste le gestionnaire de succès. Regardons un exemple simple (test3.html).
var idbSupported = false; var db; document.addEventListener ("DOMContentLoaded", function () if ("indexedDB" dans la fenêtre) idbSupported = true; if (idbSupported) var openRequest = indexedDB.open ("test", 1); openRequest.onupgradeneeded = function (e) console.log ("Mise à niveau ..."); openRequest.onsuccess = function (e) console.log ("Success!"); db = e.target.result; openRequest.onerror = function (e ) console.log ("Erreur"); console.dir (e);, false); Une fois encore, nous vérifions si IndexedDB est réellement pris en charge et, le cas échéant, nous ouvrons une base de données. Nous avons couvert trois événements ici: l'événement de mise à niveau nécessaire, l'événement de réussite et l'événement d'erreur. Pour l'instant, concentrez-vous sur l'événement à succès. L'événement est transmis à un gestionnaire via target.result. Nous avons copié cela dans une variable globale appelée db. C’est quelque chose que nous utiliserons plus tard pour ajouter des données. Si vous exécutez ceci dans votre navigateur (dans celui qui prend en charge IndexedDB bien sûr!), Vous devriez voir le message de mise à niveau et de réussite dans votre console lors de la première exécution du script. La deuxième fois, et ainsi de suite, lorsque vous exécutez le script, vous ne devriez voir que le message de réussite..
Jusqu'à présent, nous avons vérifié, pris en charge et pris en charge la prise en charge d'IndexedDB et ouvert une connexion à une base de données. Nous avons maintenant besoin d’un endroit pour stocker les données. IndexedDB a un concept de "magasins d'objets". Vous pouvez considérer cela comme une table de base de données typique. (Il est beaucoup plus lâche qu'une table de base de données classique, mais ne vous en inquiétez pas pour le moment.) Les magasins d'objets contiennent des données (évidemment), mais également un chemin d'accès aux clés et un ensemble facultatif d'index. Les clés sont des identifiants uniques pour vos données et se présentent sous différents formats. Les index seront traités plus tard lorsque nous commencerons à récupérer des données..
Maintenant, pour quelque chose de crucial. Vous souvenez-vous de l'événement surclassé mentionné précédemment? Vous pouvez uniquement créer des librairies lors d'un événement mis à niveau. Maintenant - par défaut - il s’exécutera automatiquement la première fois qu'un utilisateur accédera à votre site. Vous pouvez l'utiliser pour créer vos magasins d'objets. La chose cruciale à retenir est que si jamais vous avez besoin de modifier Dans vos magasins d’objets, vous devrez mettre à niveau la version (dans cet événement ouvert) et écrire du code pour gérer vos modifications. Regardons un exemple simple de cela en action.
var idbSupported = false; var db; document.addEventListener ("DOMContentLoaded", function () if ("indexedDB" dans la fenêtre) idbSupported = true; if (idbSupported) var openRequest = indexedDB.open ("test_v2", 1); openRequest.onupgradeneeded = function (e) console.log ("onupgradeneeded"); var thisDB = e.target.result; if (! thisDB.objectStoreNames.contains ("firstOS")) thisDB.createObjectStore ("firstOS"); openRequest .onsuccess = function (e) console.log ("Succès!"); db = e.target.result; openRequest.onerror = function (e) console.log ("Erreur"); console.dir (e ); ,faux); Cet exemple (test4.html) s'appuie sur les entrées précédentes, je vais donc me concentrer sur les nouveautés. Dans l’événement upgradeneeded, j’ai utilisé la variable de base de données qui lui a été transmise (thisDB). L’une des propriétés de cette variable est une liste de librairies existantes appelée objectStoreNames. Pour les curieux, ce n'est pas un simple tableau, mais un "DOMStringList". Ne me demande pas - mais voilà. Nous pouvons utiliser le contient méthode pour voir si notre magasin d'objets existe, et si non, le créer. C'est l'une des rares fonctions synchrones d'IndexedDB, nous n'avons donc pas à écouter le résultat..
En résumé, voici ce qui se produirait lorsqu'un utilisateur visitait votre site. La première fois qu'ils sont ici, l'événement mis à niveau se déclenche. Le code vérifie si un magasin d'objets, "firstOS" existe. Ça ne sera pas. Par conséquent - il est créé. Ensuite, le gestionnaire de succès s'exécute. Lors de la deuxième visite sur le site, le numéro de version sera le même, de sorte que l'événement mis à niveau est ne pas mis à la porte.
Maintenant, imaginez que vous vouliez ajouter un deuxième magasin d'objets. Tout ce que vous avez à faire est d’incrémenter le numéro de version et de dupliquer le bloc de code contient / createObjectStore que vous voyez ci-dessus. Ce qui est bien, c'est que votre code mis à niveau prend en charge à la fois les personnes novices sur le site et celles qui possèdent déjà le premier magasin d'objets. Voici un exemple de cela (test5.html):
var openRequest = indexedDB.open ("test_v2", 2); openRequest.onupgradeneeded = function (e) console.log ("en cours d'exécution sur une mise à niveau"); var thisDB = e.target.result; if (! thisDB.objectStoreNames.contains ("firstOS")) thisDB.createObjectStore ("firstOS"); if (! thisDB.objectStoreNames.contains ("secondOS")) thisDB.createObjectStore ("secondOS"); Une fois que vos magasins d'objets sont prêts, vous pouvez commencer à ajouter des données. C’est peut-être l’un des aspects les plus intéressants d’IndexedDB. À la différence des bases de données traditionnelles basées sur des tables, IndexedDB vous permet de stocker un objet tel quel. Cela signifie que vous pouvez prendre un objet JavaScript générique et le stocker. Terminé. Évidemment, il y a quelques mises en garde ici, mais pour la plupart, c'est tout.
Travailler avec des données nécessite l'utilisation d'une transaction. Les transactions prennent deux arguments. Le premier est un tableau de tables avec lequel vous allez travailler. La plupart du temps, ce sera une table. Le deuxième argument est le type de transaction. Il existe deux types de transactions: readonly et readwrite. L'ajout de données sera une opération de lecture / écriture. Commençons par créer la transaction:
// Supposons que db soit une variable de base de données ouverte précédemment var transaction = db.transaction (["people"], "readwrite");
Notez que le magasin d'objets, "personnes", est l'un de ceux que nous avons créés dans l'exemple ci-dessus. Notre prochaine démo complète en fera usage. Après avoir obtenu la transaction, vous demandez ensuite le magasin d’objets avec lequel vous avez dit que vous travailleriez:
var store = transaction.objectStore ("personnes"); Maintenant que vous avez le magasin, vous pouvez ajouter des données. Cela se fait via le - attendez - ajouter méthode.
// Définir une personne var personne = nom: nom, email: email, créé: nouveau Date () // Effectuer la demande d'ajout de var = magasin.add (personne, 1);
Rappelez-vous plus tôt nous avons dit que vous pouvez stocker toutes les données que vous voulez (pour la plupart). Donc, mon objet personnel ci-dessus est complètement arbitraire. J'aurais pu utiliser firstName et lastName au lieu de simplement name. J'aurais pu utiliser une propriété de genre. Vous avez eu l'idée. Le deuxième argument est la clé utilisée pour identifier les données de manière unique. Dans ce cas, nous avons codé en dur le code 1, ce qui posera un problème assez rapidement. C'est bon - nous allons apprendre à le corriger.
L'opération add est ascynchrone, ajoutons donc deux gestionnaires d'événements pour le résultat.
request.onerror = function (e) console.log ("Erreur", e.target.error.name); // un type de gestionnaire d'erreur request.onsuccess = function (e) console.log ("Woot! Did it"); Nous avons un une erreur gestionnaire pour les erreurs et en cas de succès pour de bons changements. Assez évident, mais voyons un exemple complet. Vous pouvez le trouver dans le fichier test6.html.
L'exemple ci-dessus contient un petit formulaire avec un bouton permettant de déclencher un événement pour stocker les données dans IndexedDB. Exécutez ceci dans votre navigateur, ajoutez quelque chose aux champs du formulaire, puis cliquez sur ajouter. Si les outils de développement de votre navigateur sont ouverts, vous devriez voir quelque chose comme ceci..
Il est temps de signaler que Chrome dispose d'un excellent visualiseur pour les données IndexedDB. Si vous cliquez sur l'onglet Ressources, développez la section IndexedDB, vous pouvez voir la base de données créée par cette démonstration ainsi que l'objet qui vient d'être entré..
Pour le plaisir, allez-y et cliquez à nouveau sur le bouton Ajouter des données. Vous devriez voir une erreur dans la console:
Le message d'erreur devrait être un indice. ConstraintError signifie que nous venons d'essayer d'ajouter des données avec la même clé que celle qui existait déjà. Si vous vous en souvenez, nous avons codé cette clé en dur et nous a connu ça allait être un problème. Il est temps de parler des clés.
Les clés sont la version de IndexedDB des clés primaires. Les bases de données traditionnelles peuvent avoir des tables sans clé, mais chaque magasin d'objets doit avoir une clé. IndexedDB permet d'utiliser deux types de clés différents.
La première option consiste simplement à spécifier vous-même, comme nous l'avons fait ci-dessus. Nous pourrions utiliser la logique pour générer des clés uniques.
Votre deuxième option est un chemin de clé, où la clé est basée sur une propriété des données elles-mêmes. Prenons l'exemple de notre personnel: nous pourrions utiliser une adresse électronique comme clé..
Votre troisième option, et à mon avis, la plus simple, consiste à utiliser un générateur de clé. Cela fonctionne un peu comme une clé primaire avec numérotation automatique et constitue la méthode la plus simple pour spécifier des clés..
Les clés sont définies lors de la création des librairies. Voici deux exemples - l'un utilisant un chemin de clé et l'autre un générateur.
thisDb.createObjectStore ("test", keyPath: "email"); thisDb.createObjectStore ("test2", autoIncrement: true); Nous pouvons modifier notre précédente démo en créant un magasin d'objets avec une clé autoIncrement:
thisDB.createObjectStore ("people", autoIncrement: true); Enfin, nous pouvons prendre l’appel Add utilisé précédemment et supprimer la clé codée en dur:
var request = store.add (personne);
C'est tout! Vous pouvez maintenant ajouter des données toute la journée. Vous pouvez trouver cette version dans test7.html.
Passons maintenant à la lecture de données individuelles (nous verrons plus tard la lecture de jeux de données plus volumineux). Encore une fois, cela sera fait dans une transaction et sera asynchrone. Voici un exemple simple:
var transaction = db.transaction (["test"], "en lecture seule"); var objectStore = transaction.objectStore ("test"); // x est une valeur var ob = objectStore.get (x); ob.onsuccess = function (e) Notez que la transaction est en lecture seule. L'appel d'API est simplement un simple appel get avec la clé transmise. En passant, si vous pensez qu'IndexedDB est un peu détaillé, notez que vous pouvez également chaîner un grand nombre de ces appels. Voici le même code écrit beaucoup plus serré:
db.transaction (["test"], "en lecture seule"). objectStore ("test"). get (X) .onsuccess = function (e) Personnellement, je trouve toujours IndexedDB un peu complexe, donc je préfère l’approche «décomposée» pour me garder au courant de ce qui se passe..
Le résultat du gestionnaire get's onsuccess est l'objet que vous avez stocké auparavant. Une fois que vous avez cet objet, vous pouvez faire ce que vous voulez. Dans notre prochaine démo (test8.html) nous avons ajouté un simple champ de formulaire pour vous permettre de saisir une clé et d’imprimer le résultat. Voici un exemple:
Le gestionnaire du bouton Obtenir les données est ci-dessous:
function getPerson (e) clé var = document.querySelector ("clé #"). valeur; if (key === "" || isNaN (key)) renvoie; var transaction = db.transaction (["personnes"], "en lecture seule"); var store = transaction.objectStore ("personnes"); var request = store.get (Nombre (clé)); request.onsuccess = function (e) résultat var = e.target.result; console.dir (résultat); si (résultat) var s = "Clé "+ clé +"
"; pour (champ var dans le résultat) s + = champ +" = "+ résultat [champ] +"
"; document.querySelector (" # status "). innerHTML = s; autrement document.querySelector (" # status "). innerHTML ="
Pas de correspondance
"; Pour la plupart, cela devrait être explicite. Obtenez la valeur du champ et exécutez un appel get sur le magasin d'objets obtenu à partir d'une transaction. Notez que le code d'affichage obtient simplement tout les champs et les déverse. Dans une application réelle, vous saurez (espérons-le) ce que vos données contiennent et travaillerez avec des champs spécifiques.
C'est ainsi que vous obtiendrez une donnée. Que diriez-vous d'un lot de données? IndexedDB prend en charge ce qu'on appelle un curseur. Un curseur vous permet de parcourir les données. Vous pouvez créer des curseurs avec une plage optionnelle (un filtre de base) et une direction..
À titre d'exemple, le bloc de code suivant ouvre un curseur pour extraire toutes les données d'un magasin d'objets. Comme tout ce que nous avons fait avec les données, ceci est asynchrone et dans une transaction.
var transaction = db.transaction (["test"], "en lecture seule"); var objectStore = transaction.objectStore ("test"); var curseur = objectStore.openCursor (); cursor.onsuccess = function (e) var res = e.target.result; if (res) console.log ("Key", res.key); console.dir ("Data", res.value); res.continue (); Le gestionnaire de réussite reçoit un objet de résultat (la variable res ci-dessus). Il contient la clé, l'objet pour les données (dans la clé de valeur ci-dessus) et une méthode continue utilisée pour itérer sur la donnée suivante..
Dans la fonction suivante, nous avons utilisé un curseur pour parcourir toutes les données du magasin d'objets. Comme nous travaillons avec des données "personne", nous avons appelé cela getPeople:
fonction getPeople (e) var s = ""; db.transaction (["personnes"], "en lecture seule"). objectStore ("personnes"). openCursor (). onsuccess = function (e) var curseur = e.target.result; si (curseur) s + = "Clé "+ Curseur.Clé +"
"; pour (champ var dans curseur. valeur) s + = champ +" = "+ curseur. valeur [champ] +"
"; s + ="
"; cursor.continue (); document.querySelector (" # status2 "). innerHTML = s; Vous pouvez voir une démo complète de cela dans votre téléchargement sous forme de fichier test9.html. Comme dans les exemples précédents, il a une logique Ajouter une personne, il suffit donc de créer quelques personnes, puis d'appuyer sur le bouton pour afficher toutes les données..
Alors maintenant, vous savez comment obtenir une seule donnée ainsi que toutes les données. Passons maintenant à notre dernier sujet - travailler avec les index.
Nous avons parlé de IndexedDB pour l’ensemble de l’article, mais nous n’avons pas encore fait d’index. Les index sont une partie cruciale des librairies IndexedDB. Ils fournissent un moyen d'extraire des données en fonction de leur valeur et d'indiquer si une valeur doit être unique dans un magasin. Nous montrerons plus tard comment utiliser les index pour obtenir une plage de données.
Premièrement, comment créez-vous un index? Comme tout le reste de la structure, elles doivent être effectuées dans un événement de mise à niveau, en même temps que vous créez votre magasin d'objets. Voici un exemple:
var objectStore = thisDb.createObjectStore ("personnes", autoIncrement: true); // le premier argument est le nom de l'index, le second est le chemin (col); objectStore.createIndex ("name", "name", unique: false); objectStore.createIndex ("email", "email", unique: true); Dans la première ligne, nous créons le magasin. Nous prenons ce résultat (un objet objectStore) et exécutons le createIndex méthode. Le premier argument est le nom de l'index et le second est la propriété qui sera indexée. Dans la plupart des cas, je pense que vous utiliserez le même nom pour les deux. Le dernier argument est un ensemble d'options. Pour l'instant, nous n'en utilisons qu'un, unique. Le premier index de nom n'est pas unique. Le second pour le courrier électronique est. Lorsqu’on stocke des données, IndexedDB vérifie ces index et s’assure que la propriété email est unique. Il effectuera également certaines manipulations de données sur le back-end pour nous assurer de pouvoir récupérer les données par ces index..
Comment ça marche? Une fois que vous avez récupéré un magasin d'objets via une transaction, vous pouvez demander un index à ce magasin. En utilisant le code ci-dessus, voici un exemple:
var transaction = db.transaction (["personnes"], "en lecture seule"); var store = transaction.objectStore ("personnes"); var index = store.index ("nom"); // nom est une valeur var request = index.get (nom); Nous obtenons d’abord la transaction, suivie du magasin, puis nous indexons. Comme nous l’avons déjà dit, vous pouvez relier ces trois premières lignes pour le rendre un peu plus compact si vous voulez..
Une fois que vous avez un index, vous pouvez alors effectuer une obtenir appelez-le pour récupérer les données par nom. Nous pourrions également faire quelque chose de similaire pour le courrier électronique. Le résultat de cet appel est encore un autre objet asynchrone auquel vous pouvez lier un gestionnaire onsuccess. Voici un exemple de ce gestionnaire trouvé dans le fichier test10.html:
request.onsuccess = function (e) résultat var = e.target.result; si (résultat) var s = "Nom "+ Nom +"
"; pour (champ var dans le résultat) s + = champ +" = "+ résultat [champ] +"
"; document.querySelector (" # status "). innerHTML = s; autrement document.querySelector (" # status "). innerHTML ="Pas de correspondance
";
Notez qu'un index obtenir L'appel peut renvoyer plusieurs objets. Puisque notre nom n'est pas unique, nous devrions probablement modifier le code pour le gérer, mais ce n'est pas obligatoire..
Maintenant passons à la vitesse supérieure. Vous avez déjà utilisé l’API get sur l’index pour obtenir une valeur basée sur cette propriété. Et si vous voulez obtenir un ensemble de données plus large? Le dernier terme que nous allons apprendre aujourd'hui est celui des gammes. Les plages sont un moyen de sélectionner un sous-ensemble d'un index. Par exemple, à partir d'un index sur une propriété de nom, nous pouvons utiliser une plage pour rechercher des noms commençant par A, puis C. Ils peuvent être "tout en dessous d'un marqueur", "tout au-dessus d'un marqueur" et "quelque chose entre un marqueur inférieur et un marqueur supérieur". Enfin, pour rendre les choses intéressantes, les gammes peuvent être inclusives ou exclusives. En gros, cela signifie que pour une plage allant de A à C, nous pouvons spécifier si nous voulons inclure A et C dans la plage ou uniquement les valeurs qui les séparent. Enfin, vous pouvez également demander des gammes ascendantes et descendantes.
Les plages sont créées à l'aide d'un objet de niveau supérieur appelé IDBKeyRange. Il a trois méthodes d'intérêt: borne inférieure, UpperBound, et lié. borne inférieure est utilisé pour créer une plage qui commence à une valeur inférieure et renvoie toutes les données "au-dessus",. UpperBound est le contraire. Et enfin - lié est utilisé pour supporter un ensemble de données avec une limite inférieure et supérieure. Regardons quelques exemples:
// Valeurs supérieures à 39 var oldRange = IDBKeyRange.lowerBound (39); // Valeurs 40a dn sur var oldRange2 = IDBKeyRange.lowerBound (40, true); // 39 et moins… var youngRange = IDBKeyRange.upperBound (40); // 39 et moins… var youngRange2 = IDBKeyRange.upperBound (39, true); // pas jeune ou vieux… vous pouvez aussi spécifier une variable inclusive / exclusive var okRange = IDBKeyRange.bound (20,40)
Une fois que vous avez une plage, vous pouvez la transmettre à la méthode openCursor d'un index. Cela vous donne un itérateur à boucler sur les valeurs qui correspondent à cette plage. De manière pratique, ce n'est pas vraiment une recherche en soi. Vous pouvez l'utiliser pour rechercher du contenu en fonction du début d'une chaîne, mais pas du milieu ou de la fin. Regardons un exemple complet. Nous allons d'abord créer un formulaire simple pour rechercher des personnes:
Commençant par:
Se terminant par:
Nous allons autoriser les recherches composées de l’un des trois types d’intervalles (encore une fois, une valeur et supérieure, une valeur maximale ou les valeurs comprises entre deux entrées). Maintenant, regardons le gestionnaire d'événements pour ce formulaire.
fonction getPeople (e) nom de la variable = document.querySelector ("# nomRecherche"). valeur; var endname = document.querySelector ("# nameSearchEnd"). value; if (name == "" && endname == "") return; var transaction = db.transaction (["personnes"], "en lecture seule"); var store = transaction.objectStore ("personnes"); var index = store.index ("nom"); // Définit la plage en fonction du type utilisé. Var range; if (name! = "" && endname! = "") range = IDBKeyRange.bound (nom, nom de fin); else if (name == "") range = IDBKeyRange.upperBound (endname); else range = IDBKeyRange.lowerBound (name); var s = ""; index.openCursor (plage) .onsuccess = fonction (e) var curseur = e.target.result; si (curseur) s + = "Clé "+ Curseur.Clé +"
"; pour (champ var dans curseur. valeur) s + = champ +" = "+ curseur. valeur [champ] +"
"; s + ="
"; cursor.continue (); document.querySelector (" # status "). innerHTML = s; De haut en bas - nous commençons par saisir les deux champs de formulaire. Ensuite, nous créons une transaction et obtenons le magasin et l’index. Passons maintenant à la partie semi-complexe. Étant donné que nous avons trois types différents de plages à prendre en charge, nous devons faire un peu de logique conditionnelle pour déterminer ce dont nous aurons besoin. La plage que nous créons est basée sur les champs que vous remplissez. Ce qui est bien, c'est qu'une fois que nous avons la plage, nous la passons simplement à l'index et ouvrons le curseur. C'est tout! Vous pouvez trouver cet exemple complet dans test11.html. Assurez-vous de saisir quelques valeurs en premier afin de pouvoir rechercher des données..
