IndededDB est une API de niveau bas qui stocke un grand nombre de données structurées (y compris les fichiers / blobs) pour le stockage du client. L'API utilise un index pour obtenir une recherche haute performance pour les données.
Récemment, il existe des besoins commerciaux qui peuvent stocker des données hors ligne, et le formulaire et les images peuvent être téléchargés lorsqu'il existe des signaux réseau. J'ai donc étudié le DB indexé de HTML5.
Pour les besoins de stockage uniquement de certains champs, le stockage local et le stockage de session peuvent être utilisés pour terminer. Mais une fois qu'une grande quantité de données est stockée, le stockage local et le stockage de session sont loin de répondre aux besoins. À l'heure actuelle, la force de IndededDB sera reflétée.
1. Créez ou ouvrez la base de données/ * Compatible avec différents navigateurs indexés * / const indexddb = window.indexeddb || window.webkitIndexeddb || Version);
Étant donné que IndededDB est compatible sur différents navigateurs, nous avons besoin d'une partie de la fonction pour être compatible avec IndededDB.
2. La fonction de rappel connectée à la base de données Request.addeventListener ('Success', fonction (événement) {// Ouvrir ou créer une base de données Success}, false); );Après avoir été connecté à la base de données, la demande écoutera trois états:
L'état de mise à niveau est de surveiller cet état lorsque IndededDDB crée une nouvelle base de données et IndededB.Open (nom, version) (Numéro de version de la base de données). Lorsque le numéro de version ne change pas, cet état ne sera pas déclenché. La création et la suppression de l'objetstore de la base de données sont effectuées dans cet événement de surveillance.
3. Créer et supprimer l'objetStoreDans IndededDB, ObjectStore est similaire à la table de base de données.
Request.adDeventListener ('upradeneeded', function (event) {// Créer une instance de base de données const db = event.target.result; // désactiver la base de données db.close (); // bkystorenames.conts (objectStOreName); / / Delete objectStore db.deleteObjectStore (objectStoRename);}, false);Vous pouvez utiliser la méthode suivante pour créer un objetStore
Request.addeventListener ('upradeneeded', fonction (événement) {// créer une instance de base de données const db = event.target.result; // déterminer s'il y a objectStore if (! Db.objectStoRenames. Contient (objectStOreName) {const store = db .createObjectStore (objectStoRename, {keypath: keypath // keypath as search motwords as objectstore}); L'index est unique});}}, false); 4. Ajout de données, suppression, chèque de modification Request.adDeventListener ('Success', fonction (événement) {// Créer une instance de base de données const db = event.target.result; // trouver un objetStore db.transaction (objectStoRename, wa); // wa is 'readwrite', Lorsque les données peuvent être lues et écrire // lorsque les données sont «Readonly», les données ne lisent que le const store = transaction.ObjectStore (objectStoRename);}, false);Ajout de la base de données, suppression et changement:
// Ajouter des données. Data Store.Delete (valeur) correspondant aux mots clés spécifiés; ('Success', fonction (événement) {// La fonction de rappel}, false);Trouver des données en fonction des index
Const index = store.index (indexname); const Cursor = index.opencursor (plage); Valeur // Data Result.Continue ();
Trouvez des données en fonction de la portée de l'index
const index = store.index (indexname); const Cursor = index.opencursor (plage); / *** plage est nul L'objet idbkeyrange est les données de la plage spécifiée de la plage spécifiée de la condition en fonction des conditions * /// supérieures ou supérieures ou égales à la plage = idbkeyrange.lowerbound (valeur, true) // (valeur, + ∞),> Valuerange = idbkeyrange. (Valeur, isopen) // supérieur ou égal à la valeur1, inférieur ou égal à la valeur2idbkeyrange.bound (valeur1, valeur2, isopen1, isopen2)
Enfin, une bibliothèque de IndededDB est encapsulée par moi-même.
Ce qui précède est le stockage local HTML5 introduit par Xiaobian. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!