IndededDB est une API de bas niveau du c?té du navigateur qui est utilisé pour stocker efficacement de grandes quantités de données structurées et prend en charge les opérations hors ligne. ① Il est plus puissant que les cookies et localstorage, adaptés aux scénarios où la persistance, la requête et l'indexation sont nécessaires; ② IndededDB prend en charge des concepts tels que des bases de données, des entrep?ts et des index d'objets, et effectue des opérations asynchrones, de suppression, de modification et de requête; ③ Lorsque vous l'utilisez, vous devez ouvrir ou créer une base de données et créer des entrep?ts et des index d'objets via onupgradeedeed; ④ Les opérations de données sont effectuées par le biais de transactions pour garantir la cohérence, y compris l'ajout, la lecture, la mise à jour et la suppression des données; ⑤ L'efficacité de la requête peut être améliorée en établissant des indices, mais il occupera un espace supplémentaire et affectera la vitesse d'écriture; ⑥ Bien qu'il soit puissant mais complexe, il est recommandé de simplifier le processus avec des bibliothèques d'encapsulation telles que Dexie.js.

L'utilisation de HTML5 indexédDB pour implémenter le stockage avancé de données client consiste principalement à stocker efficacement de grandes quantités de données structurées du c?té du navigateur, et même de prendre en charge les opérations hors ligne. Il est plus puissant que les cookies et localStorage, et convient aux scénarios d'application qui nécessitent de la persistance, de la requête et de l'indexation.

Qu'est-ce que l'indexéddb?

IndededDB est une API de bas niveau qui stocke de grandes quantités de données structurées dans le navigateur d'un utilisateur, adapté aux applications Web qui doivent gérer des structures de données complexes. Contrairement à la méthode de stockage de paires de valeurs de clé simple de LocalStorage, indexDB prend en charge des concepts tels que des bases de données, des référentiels d'objets (similaires aux tables) et des index. Il peut être ajouté, supprimé, modifié et vérifié, et est une opération asynchrone qui ne bloquera pas le rendu de la page.

Par exemple: si vous développez une application de taches qui souhaite que les utilisateurs ajoutent des taches et recherchent des taches terminées même sans réseau, IndededDB est très adapté à ce scénario.

Comment démarrer avec IndededDB?

Pour utiliser IndededDB, vous devez d'abord ouvrir ou créer une base de données. Ce processus comprend plusieurs étapes clés:

• Créer ou ouvrir une base de données
• Créer un magasin d'objets
• Créer un index (facultatif)

Voici un extrait de code simple:

 const de demande = indededdb.open ("MyDatabase", 1);

request.onupgradeeded = fonction (événement) {
    const db = event.target.result;
    if (! db.objectstorenames.contains ('tasks')) {
        const objectStore = db.createObjectStore ('tasks', {keypath: 'id'});
        objectStore.CreateIndex ('Title', 'Title', {Unique: False});
    }
};

request.onsuccess = fonction (événement) {
    const db = event.target.result;
    // Vous pouvez effectuer des opérations de lecture et d'écriture ici};

request.onError = fonction (événement) {
    Console.Error ("L'ouverture de la base de données a échoué");
};

Dans ce processus, onupgradeneeded est une étape très importante, qui ne sera déclenchée que lorsque le numéro de version est mis à niveau, et est utilisé pour créer ou modifier la structure de la base de données.

Comment effectuer des opérations de données de base?

Une fois la base de données ouverte avec succès, vous pouvez ajouter, supprimer, modifier et vérifier les données. Ces opérations sont toutes effectuées par le biais de ?transactions? pour garantir la cohérence des données.

Ajouter des données :

 const transaction = db.transaction (['tasks'], 'readwrite');
const Store = Transaction.ObjectStore (?taches?);
store.add ({id: 1, titre: "Learn indededdb"});

Lire les données :

 const de demande = store.get (1);
request.onsuccess = fonction (événement) {
    console.log (event.target.result);
};

Mettre à jour les données :

 const de demande = store.get (1);
request.onsuccess = fonction (événement) {
    const data = event.target.result;
    data.title = "Notes d'étude indexedDB";
    store.put (données);
};

Supprimer les données :

 store.delete (1);

Ces opérations doivent être gérées par le biais de transactions et sont asynchrones, vous devez donc faire attention à l'utilisation des fonctions de rappel pour éviter l'incohérence des données en raison de problèmes asynchrones.

Utiliser les index pour améliorer l'efficacité de la requête

Si vous avez souvent besoin de vous interroger en fonction de certains champs (tels que le titre de la tache), vous pouvez indexer le champ. Cela vous permet de localiser rapidement des enregistrements cibles dans de grandes quantités de données.

Par exemple, nous avons ajouté un index du champ title lors de la création du référentiel d'objets ci-dessus. Vous pouvez ensuite interroger via l'index:

 const index = store.index ('title');
const de demande = index.getall (?Learn indedDB?);

request.onsuccess = fonction (événement) {
    console.log (event.target.result); // Sortie de tous les enregistrements de correspondance de l'en-tête};

Les index peuvent améliorer considérablement l'efficacité de la requête, en particulier lorsque le volume de données est important. Cependant, il convient de noter que l'indexation occupera un espace de stockage supplémentaire et peut affecter la vitesse d'écriture. Par conséquent, vous devez raisonnablement choisir d'établir un indice en fonction des besoins réels.

Fondamentalement, c'est tout. IndededDB est puissant mais légèrement compliqué à utiliser. Il est recommandé de combiner les bibliothèques d'encapsulation (telles que Dexie.js) pour simplifier le processus de fonctionnement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!