Maison interface Web js tutoriel Base de données indexée

Base de données indexée

Sep 06, 2024 pm 09:01 PM

Quelle question Base de données indexée résout-il ?


Base de données indexée est une solution pour stocker de grandes quantités de données structurées, même hors ligne. Il résout le problème du stockage local efficace pour les applications Web, en leur permettant d'accéder, de mettre à jour et d'interroger de grands ensembles de données directement côté client.


Problèmes clés résolus par Base de données indexée :

  • Stockage local persistant de données structurées.
  • Stockage et récupération efficaces d'ensembles de données volumineux.
  • Fonctionnalité dans les modes hors ligne et en ligne.
  • Accès asynchrone aux données, empêchant le blocage du thread principal.

Exemple de code :

// Open an Base de données indexée database
let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  // Create an object store
  let objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};

request.onsuccess = function(event) {
  let db = event.target.result;
  console.log("Database opened successfully");
};

Comment utiliser Base de données indexée

Ouvrir la base de données : ouvrez une base de données Base de données indexée avec la fonction indexedDB.open().
Créer des magasins d'objets : les magasins d'objets sont similaires aux tables des bases de données relationnelles.
Effectuer des transactions : utilisez des transactions pour ajouter, récupérer, mettre à jour ou supprimer des données.
Création d'index : les index sont utilisés pour rechercher des données dans les magasins d'objets.
Gestion des erreurs : gérez les opérations asynchrones avec les écouteurs d'événements.

// Adding data to Base de données indexée
let addData = function(db) {
  let transaction = db.transaction(["users"], "readwrite");
  let objectStore = transaction.objectStore("users");

  let user = { id: 1, name: "Alice", email: "alice@example.com" };
  let request = objectStore.add(user);

  request.onsuccess = function() {
    console.log("User added to Base de données indexée!");
  };
};

// Retrieve data
let getData = function(db) {
  let transaction = db.transaction(["users"], "readonly");
  let objectStore = transaction.objectStore("users");

  let request = objectStore.get(1);
  request.onsuccess = function(event) {
    console.log("User:", event.target.result);
  };
};

Avantages d'Base de données indexée
Base de données indexée offre plusieurs avantages clés qui le rendent idéal pour les applications Web modernes

  • Grande capacité de stockage : Base de données indexée peut stocker plus de données que localStorage ou sessionStorage

Base de données indexée

  • Accès asynchrone : empêche le blocage de l'interface utilisateur en utilisant des opérations d'E/S non bloquantes.

  • Gestion des données complexes : prend en charge les données structurées, notamment les tableaux, les objets et les blobs.

  • Support hors ligne : fonctionne à la fois en ligne et hors ligne, permettant les cas d'utilisation de Progressive Web App (PWA).

  • Recherches indexées : les données peuvent être recherchées efficacement via des index.
    Base de données indexée

Base de données indexée

// Create an index to improve search performance
objectStore.createIndex("email", "email", { unique: true });

let emailIndex = objectStore.index("email");
let request = emailIndex.get("alice@example.com");

request.onsuccess = function(event) {
  console.log("User found by email:", event.target.result);
};

Base de données indexée

*Comprendre les index Base de données indexée
*

Que sont les index Base de données indexée ?
Les index Base de données indexée sont des structures de données supplémentaires au sein d'un magasin d'objets qui permettent une récupération efficace des données en fonction de propriétés spécifiques. Un index se compose d'un chemin de clé (une ou plusieurs propriétés) et d'options pour définir l'unicité et l'ordre de tri. En créant des index, vous pouvez optimiser les opérations d'interrogation et de filtrage des données, ce qui améliore les performances.

Importance des index dans Base de données indexée
Les index jouent un rôle crucial dans l'amélioration des performances de récupération de données dans Base de données indexée. Sans index, l'interrogation de données basée sur des propriétés spécifiques nécessiterait une itération sur tous les enregistrements, ce qui entraînerait une récupération des données plus lente et moins efficace. Les index permettent un accès direct aux données basées sur les propriétés indexées, réduisant ainsi le besoin d'analyses complètes des tables et améliorant considérablement la vitesse d'exécution des requêtes.

let transaction = db.transaction("MyObjectStore", "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("nameIndex");

let cursorRequest = index.openCursor();

cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    // Access the current record
    console.log(cursor.value);

    // Move to the next record
    cursor.continue();
  }
};

Filtrage des données avec des requêtes de plage Base de données indexée
Les index permettent également des requêtes par plage, vous permettant de filtrer les données en fonction d'une plage de valeurs. Voici un exemple de récupération d’enregistrements dans une plage d’âge spécifique :

let transaction = db.transaction("MyObjectStore", "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("ageIndex");

let range = IDBKeyRange.bound(18, 30); // Records with age between 18 and 30

let cursorRequest = index.openCursor(range);

cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    // Process the record within the desired age range
    console.log(cursor.value);

    // Move to the next record
    cursor.continue();
  }
};


Tri des données avec des index

Les index peuvent également être utilisés pour trier les données dans Base de données indexée. En ouvrant un curseur sur un index et en précisant l'ordre de tri souhaité, vous pouvez récupérer les enregistrements dans l'ordre souhaité.

let transaction = db.transaction("MyObjectStore", "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("nameIndex");

let cursorRequest = index.openCursor(null, "next"); // Sorted in ascending order

cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    // Process the record
    console.log(cursor.value);

    // Move to the next record
    cursor.continue();
  }
};

Maintenance de l'index et mises à niveau du schéma

Ajout de nouveaux index aux magasins d'objets existants
Pour ajouter de nouveaux index à une librairie existante, vous devez gérer le processus de mise à niveau de la base de données. Voici un exemple d'ajout d'un nouvel index lors d'une mise à niveau d'une base de données.

let request = indexedDB.open("MyDatabase", 2);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("MyObjectStore", { keyPath: "id" });

  // Add a new index during upgrade
  objectStore.createIndex("newIndex", "newProperty", { unique: false });
};

Dans cet exemple, nous mettons à niveau la version de la base de données de 1 à 2 et ajoutons un nouvel index nommé « newIndex » sur la propriété « newProperty ».


Considérations relatives aux performances et meilleures pratiques
Choisir les bons index Base de données indexée
Lors de la création d’index, il est important de choisir soigneusement les propriétés à indexer en fonction des modèles d’accès aux données de votre application. Les index doivent être créés sur des propriétés couramment utilisées pour le filtrage, le tri ou la recherche afin de maximiser leurs avantages.

Limiter la taille de l'index et l'impact sur les performances
Les index volumineux peuvent consommer un espace de stockage important et avoir un impact sur les performances. Il est conseillé de limiter le nombre d’index et de choisir les chemins clés nécessaires à une récupération efficace des données. Évitez une indexation excessive pour maintenir des performances optimales.

Monitoring Index Performance
Regularly monitor the performance of your Base de données indexée indexes using browser developer tools and profiling techniques. Identify any slow queries or bottlenecks and optimize your indexes accordingly. It may involve modifying the index structure or adding additional indexes to improve query execution speed.


Cursor in Base de données indexée

let request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["users"], "readonly");
  let objectStore = transaction.objectStore("users");

  let cursorRequest = objectStore.openCursor();
  let batchSize = 10;
  let count = 0;

  cursorRequest.onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
      console.log("Key:", cursor.key, "Value:", cursor.value);
      count++;

      // If batch size is reached, stop processing
      if (count 




<hr>

<p><strong>Base de données indexée Sharding</strong></p>

<p>Sharding is a technique, normally used in server side databases, where the database is partitioned horizontally. Instead of storing all documents at one table/collection, the documents are split into so called shards and each shard is stored on one table/collection. This is done in server side architectures to spread the load between multiple physical servers which increases scalability.</p>

<p>When you use Base de données indexée in a browser, there is of course no way to split the load between the client and other servers. But you can still benefit from sharding. Partitioning the documents horizontally into multiple Base de données indexée stores, has shown to have a big performance improvement in write- and read operations while only increasing initial pageload slightly.</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172562768663567.jpg" class="lazy" alt="Base de données indexée"></p>


<hr>

<p><strong>Conclusion</strong><br>
Base de données indexée represents a paradigm shift in browser-based storage, empowering developers to build powerful web applications with offline capabilities and efficient data management. By embracing Base de données indexée and adhering to best practices, developers can unlock new possibilities in web development, delivering richer and more responsive user experiences across a variety of platforms and devices. As the web continues to evolve, Base de données indexée stands as a testament to the innovative solutions driving the next generation of web applications.</p>


<hr>


          

            
        

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel PHP
1538
276
Appareils et contextes avancés JavaScript Appareils et contextes avancés JavaScript Jul 24, 2025 am 12:42 AM

La portée de JavaScript détermine la portée d'accessibilité des variables, qui sont divisées en étendue globale, fonction et au niveau du bloc; Le contexte détermine la direction de cela et dépend de la méthode d'appel de fonction. 1. Les étendues incluent la portée globale (accessible n'importe où), la portée de la fonction (valide uniquement dans la fonction) et la portée au niveau du bloc (LET et const sont valides dans {}). 2. Le contexte d'exécution contient l'objet variable, la chaîne de portée et les valeurs de cela. Cela pointe vers global ou non défini dans la fonction ordinaire, l'appel de méthode pointe vers l'objet d'appel, le constructeur pointe vers le nouvel objet, et peut également être explicitement spécifié par appel / application / liaison. 3. La fermeture fait référence aux fonctions accédant et en se souvenant des variables de portée externes. Ils sont souvent utilisés pour l'encapsulation et le cache, mais peuvent provoquer

Exploration des règles de coercition de type en javascript Exploration des règles de coercition de type en javascript Jul 21, 2025 am 02:31 AM

La coulée de type est le comportement de la conversion automatique d'un type de valeur en un autre type en JavaScript. Les scénarios courants incluent: 1. Lorsque vous utilisez des opérateurs, si un côté est une chaîne, l'autre côté sera également converti en une chaîne, comme '5' 5. Le résultat est "55"; 2. Dans le contexte booléen, les valeurs non cooliennes seront implicitement converties en types booléens, tels que des chaînes vides, 0, nuls, non définies, etc., qui sont considérées comme fausses; 3. Null participe aux opérations numériques et sera convertie en 0, et non défini sera converti en NAN; 4. Les problèmes causés par la conversion implicite peuvent être évitées grâce à des fonctions de conversion explicites telles que Number (), String () et Boolean (). La maîtrise de ces règles aide

API de composition Vue 3 Vs API Options: une comparaison détaillée API de composition Vue 3 Vs API Options: une comparaison détaillée Jul 25, 2025 am 03:46 AM

CompositionAPI dans Vue3 convient plus à la logique complexe et à la dérivation de type, et OptionsAPI convient aux scénarios et débutants simples; 1. OptionsAPI organise le code en fonction d'options telles que les données et les méthodes, et a une structure claire mais les composants complexes sont fragmentés; 2. CompositionAPI utilise la configuration pour concentrer la logique liée, ce qui est propice à la maintenance et à la réutilisation; 3. CompositionAPI réalise la réutilisation logique sans conflit et paramétrisable par le biais de fonctions composables, ce qui est mieux que le mixin; 4. CompositionAPI a une meilleure prise en charge de la dérivation de type dactylographiée et de type plus précise; 5. Il n'y a pas de différence significative dans le volume de performances et d'emballage des deux; 6.

Maîtriser les modèles de concurrence JavaScript: les travailleurs du web contre les threads Java Maîtriser les modèles de concurrence JavaScript: les travailleurs du web contre les threads Java Jul 25, 2025 am 04:31 AM

Il existe une différence essentielle entre les travailleurs Web de JavaScript et Javathreads dans un traitement simultané. 1. JavaScript adopte un modèle unique. WebWorkers est un fil indépendant fourni par le navigateur. Il convient pour effectuer des tâches longues qui ne bloquent pas l'interface utilisateur, mais ne peuvent pas utiliser le DOM; 2. Java prend en charge le multithreading réel à partir du niveau de la langue, créé via la classe de threads, adapté à un traitement simultanée complexe et côté serveur; 3. Les travailleurs Web utilisent PostMessage () pour communiquer avec le fil principal, qui est hautement sécurisé et isolé; Les threads Java peuvent partager la mémoire, de sorte que les problèmes de synchronisation doivent être prêts à prêter attention; 4. Les travailleurs Web sont plus adaptés à l'informatique parallèle frontale, comme le traitement d'image, et

Construire un outil CLI avec Node.js Construire un outil CLI avec Node.js Jul 24, 2025 am 03:39 AM

Initialiser le projet et créer package.json; 2. Créez un script d'entrée index.js avec shebang; 3. Registre des commandes via des champs bin dans package.json; 4. Utilisez des Yargs et d'autres bibliothèques pour analyser les paramètres de ligne de commande; 5. Utilisez le test local NPMLink; 6. Ajouter l'aide, la version et les options pour améliorer l'expérience; 7. Publier éventuellement via NPMPublish; 8. Affectuer éventuellement l'achèvement automatique avec Yargs; Enfin, créez des outils CLI pratiques grâce à une structure raisonnable et à une conception de l'expérience utilisateur, effectuer des tâches d'automatisation ou distribuer des widgets et se terminer par des phrases complètes.

Comment créer et ajouter des éléments dans JS? Comment créer et ajouter des éléments dans JS? Jul 25, 2025 am 03:56 AM

Utilisez Document.CreateElement () pour créer de nouveaux éléments; 2. Personnaliser les éléments via TextContent, ClassList, SetAttribute et d'autres méthodes; 3. Utilisez des méthodes APPEDCHILD () ou plus flexibles APPEND () pour ajouter des éléments au DOM; 4. Utiliser éventuellement INSERTBEFORE (), avant () et d'autres méthodes pour contrôler la position d'insertion; Le processus complet consiste à créer → Personnaliser → Ajouter, et vous pouvez mettre à jour dynamiquement le contenu de la page.

Types conditionnels avancés en dactylographie Types conditionnels avancés en dactylographie Aug 04, 2025 am 06:32 AM

Les types de conditions avancées de TypeScript implémentent le jugement logique entre les types via TextendU? X: Y Syntaxe. Ses capacités de base se reflètent dans les types de conditions distribuées, l'inférence de type inférieure et la construction d'outils de type complexe. 1. Le type conditionnel est distribué dans les paramètres de type nu et peut automatiquement diviser le type de joint, tel que pour obtenir la chaîne [] | nombre []. 2. Utiliser la distribution pour construire des outils de filtrage et d'extraction: exclut exclut les types via TextendU? Never: T, extraire extrait les points communs via TextendU? T: jamais, et des filtres non nuls nuls / non définis. 3

Architecture Micro Frontend: un guide de mise en œuvre pratique Architecture Micro Frontend: un guide de mise en œuvre pratique Aug 02, 2025 am 08:01 AM

MicrofronttendSSolvescalingCallegengeSInLargeTeamsByAnabled indépendante développement et élaboration de choOsanIntegrationsStrategy: UseModuleFederationInwebpack5ForruntimeLoadingAndTrue Independence, Build-Time IntegrationForsIpleSetups, Oriframes / webcomponents webcomponents

See all articles