HTML - IndexedDB

Création de données

Pour ajouter des données à un magasin d'objets dans IndexedDB, vous devez utiliser des transactions. Ouvrez d'abord une transaction sur le magasin d'objets souhaité en mode "readwrite". Ensuite, obtenez une référence au magasin d'objets en utilisant la méthode objectStore() sur l'objet de transaction. Enfin, utilisez la méthode add() ou put() sur le magasin d'objets pour ajouter les données.

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

request.onsuccess = function(event) {
  db = event.target.result;
  addData({ id: 1, name: "John Doe", age: 25 });
};

function addData(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Données ajoutées avec succès");
  };

  request.onerror = function(event) {
    console.log("Erreur lors de l'ajout des données");
  };
}

La méthode add() est utilisée pour ajouter de nouvelles données, tandis que la méthode put() peut être utilisée pour ajouter de nouvelles données ou mettre à jour des données existantes si la clé existe déjà.

Il est important de gérer les erreurs qui peuvent survenir pendant le processus d'ajout de données. Vous pouvez utiliser le gestionnaire d'événements onerror sur l'objet de requête pour capturer et gérer les erreurs.

Lecture de données

Pour obtenir des données d'un magasin d'objets, vous pouvez utiliser la méthode get() sur le magasin d'objets. Vous devez fournir la clé des données que vous souhaitez obtenir.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Données récupérées :", data);
};

Si vous voulez rechercher des données basées sur une propriété spécifique, vous pouvez utiliser des index. Obtenez d'abord une référence à l'index en utilisant la méthode index() sur le magasin d'objets. Ensuite, utilisez la méthode get() sur l'index pour obtenir des données basées sur la clé de l'index.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("name");

let request = index.get("John Doe");

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Données récupérées :", data);
};

Pour des requêtes plus avancées ou pour parcourir plusieurs entrées de données, vous pouvez utiliser des curseurs. Les curseurs vous permettent de parcourir toutes les données d'un magasin d'objets ou d'un index. Vous pouvez ouvrir un curseur en utilisant la méthode openCursor() sur le magasin d'objets ou l'index.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.openCursor();

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log("Clé :", cursor.key);
    console.log("Données :", cursor.value);
    cursor.continue();
  } else {
    console.log("Plus de données");
  }
};

Dans l'exemple ci-dessus, nous ouvrons un curseur sur le magasin d'objets. Le gestionnaire d'événements onsuccess est appelé pour chaque entrée de données. Nous pouvons accéder à la clé et à la valeur de l'entrée actuelle en utilisant respectivement cursor.key et cursor.value. Pour passer à l'entrée suivante, nous appelons la méthode continue() sur le curseur.

Mise à jour des données

Pour mettre à jour des données existantes dans un magasin d'objets, vous pouvez utiliser la méthode put(). Elle fonctionne de manière similaire à la méthode add(), mais si la clé existe déjà, elle mettra à jour les données correspondantes.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let updatedData = { id: 1, name: "John Doe", age: 26 };
let request = objectStore.put(updatedData);

request.onsuccess = function(event) {
  console.log("Données mises à jour avec succès");
};

Vous pouvez également mettre à jour des champs spécifiques d'une entrée de données existante en utilisant la méthode put(). Obtenez d'abord les données en utilisant la méthode get(), mettez à jour les champs souhaités, puis utilisez put() pour enregistrer les modifications.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  data.age = 27;

  let updateRequest = objectStore.put(data);

  updateRequest.onsuccess = function(event) {
    console.log("Données mises à jour avec succès");
  };
};

Lors de la mise à jour des données, soyez attentif aux changements de version et de schéma. Si vous devez modifier la structure de vos magasins d'objets ou de vos index, vous devez le gérer dans le gestionnaire d'événements onupgradeneeded et versionner correctement votre base de données.

Suppression de données

Pour supprimer des données d'un magasin d'objets, vous pouvez utiliser la méthode delete() sur le magasin d'objets. Vous devez fournir la clé des données que vous souhaitez supprimer.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.delete(1);

request.onsuccess = function(event) {
  console.log("Données supprimées avec succès");
};

Si vous voulez effacer un magasin d'objets entier, vous pouvez utiliser la méthode clear() sur le magasin d'objets.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.clear();

request.onsuccess = function(event) {
  console.log("Magasin d'objets effacé avec succès");
};

Pour supprimer une base de données, vous pouvez utiliser la méthode deleteDatabase() sur l'objet indexedDB. Cela supprimera complètement la base de données et tous ses magasins d'objets.

let request = indexedDB.deleteDatabase("MyDatabase");

request.onsuccess = function(event) {
  console.log("Base de données supprimée avec succès");
};

Soyez prudent lors de la suppression de données, car il s'agit d'une opération permanente qui ne peut pas être annulée. Voici la traduction en français :

Gestion des versions et mises à niveau

IndexedDB utilise la gestion des versions pour gérer les changements de structure de la base de données au fil du temps. Chaque base de données a un numéro de version qui lui est associé. Lorsque vous ouvrez une base de données avec un numéro de version supérieur à celui actuel, l'événement onupgradeneeded est déclenché, vous permettant de modifier le schéma de la base de données.

let request = indexedDB.open("MaBaseDeDonnees", 2); // Mise à niveau vers la version 2

request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // Effectuer les changements de schéma de la base de données
  if (event.oldVersion < 1) {
    // Créer des object stores et des index pour la version 1
    let objectStore = db.createObjectStore("MonObjectStore", { keyPath: "id" });
    objectStore.createIndex("nom", "nom", { unique: false });
  }

  if (event.oldVersion < 2) {
    // Effectuer les changements pour la version 2
    let objectStore = db.createObjectStore("AutreObjectStore", { keyPath: "id" });
    objectStore.createIndex("categorie", "categorie", { unique: false });
  }
};

Dans l'exemple ci-dessus, nous ouvrons la base de données avec la version 2. Si la version actuelle est inférieure à 2, l'événement onupgradeneeded est déclenché. Nous pouvons alors vérifier la propriété oldVersion pour connaître la version actuelle et effectuer les changements de schéma nécessaires pour chaque mise à niveau de version.

Index et clés composées

Les index dans IndexedDB vous permettent d'interroger et de rechercher des données efficacement en fonction de propriétés spécifiques. Vous pouvez créer des index sur des propriétés uniques ou créer des index composés qui combinent plusieurs propriétés.

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

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

  // Créer un index sur une propriété unique
  objectStore.createIndex("nom", "nom", { unique: false });

  // Créer un index composé
  objectStore.createIndex("nomAge", ["nom", "age"], { unique: false });
};

Dans l'exemple ci-dessus, nous créons un index sur la propriété unique "nom" et un index composé sur les propriétés "nom" et "age". Les index composés vous permettent d'interroger les données en fonction de plusieurs propriétés en même temps.

Transactions et concurrence

Les transactions dans IndexedDB garantissent que les données sont correctes et cohérentes. Toutes les opérations de base de données doivent être effectuées dans le cadre d'une transaction. Les transactions peuvent être en lecture seule ou en lecture-écriture, selon le type d'opérations effectuées.

IndexedDB prend également en charge l'accès concurrent à la base de données. Plusieurs transactions peuvent être actives en même temps, mais elles opèrent sur différents object stores ou ont différents modes d'accès (lecture seule ou lecture-écriture) pour éviter les conflits.

let transaction1 = db.transaction(["ObjectStore1"], "readonly");
let transaction2 = db.transaction(["ObjectStore2"], "readwrite");

// Plusieurs transactions peuvent être actives simultanément
transaction1.objectStore("ObjectStore1").get(1);
transaction2.objectStore("ObjectStore2").add({ id: 1, nom: "Jean" });

Dans l'exemple ci-dessus, nous avons deux transactions actives en même temps. transaction1 est en lecture seule et opère sur "ObjectStore1", tandis que transaction2 est en lecture-écriture et opère sur "ObjectStore2". Elles peuvent se dérouler indépendamment sans conflits.

Considérations de performance

Pour optimiser les performances de votre utilisation d'IndexedDB, tenez compte des points suivants :

En gardant à l'esprit ces considérations de performance et en utilisant judicieusement les index, les transactions et la concurrence, vous pouvez créer des applications web efficaces et rapides avec IndexedDB.

Gestion des données sensibles

Si votre application traite des données sensibles, telles que des informations personnelles ou des détails financiers, vous devez prendre des précautions supplémentaires lors du stockage et de la manipulation de ces données dans IndexedDB. Voici quelques bonnes pratiques :

1. Chiffrer les données sensibles : Avant de stocker des informations sensibles dans IndexedDB, chiffrez-les en utilisant un algorithme de chiffrement fort. Ainsi, même si quelqu'un accède aux données IndexedDB, il ne pourra pas lire les informations sensibles sans la clé de chiffrement.

2. Utiliser des bibliothèques de chiffrement sécurisées : Utilisez des bibliothèques ou des algorithmes de chiffrement bien établis et fiables, tels que AES (Advanced Encryption Standard), pour chiffrer et déchiffrer les données sensibles. Ne créez pas vos propres algorithmes de chiffrement, car ils peuvent comporter des vulnérabilités.

3. Stocker les clés de chiffrement de manière sécurisée : Gardez les clés de chiffrement utilisées pour chiffrer et déchiffrer les données sensibles en sécurité. Ne les stockez pas dans la même base de données que les données chiffrées. Envisagez plutôt d'utiliser des techniques comme les fonctions de dérivation de clé ou des mécanismes de stockage sécurisé de clés fournis par la plateforme ou le navigateur.

4. Minimiser la conservation des données : Ne stockez des données sensibles dans IndexedDB que lorsque c'est absolument nécessaire. Si les données ne sont plus nécessaires, supprimez-les de manière sécurisée de la base de données. Examinez et supprimez régulièrement toute information sensible inutile pour réduire le risque de fuites de données.

Sécurisation de l'accès à IndexedDB

En plus de gérer les données sensibles de manière sécurisée, vous devez également contrôler l'accès à IndexedDB pour empêcher les accès ou les modifications non autorisés. Voici quelques mesures que vous pouvez prendre :

1. Utiliser les fonctions de sécurité du navigateur : Utilisez les fonctions de sécurité du navigateur comme la politique de même origine (Same-Origin Policy) et la politique de sécurité du contenu (Content Security Policy - CSP) pour restreindre l'accès à IndexedDB depuis des sources non fiables. Ces politiques aident à prévenir les attaques de type cross-site scripting (XSS) et les accès non autorisés à IndexedDB depuis différentes origines.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

2. Implémenter l'authentification des utilisateurs : Si votre application nécessite une authentification des utilisateurs, assurez-vous que seuls les utilisateurs authentifiés peuvent accéder aux données IndexedDB. Utilisez des mécanismes d'authentification sécurisés, tels que des jetons ou la gestion de session, pour vérifier l'identité de l'utilisateur avant d'accorder l'accès à la base de données.

// Exemple d'authentification basée sur un jeton
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

3. Appliquer des contrôles d'accès : Implémentez des contrôles d'accès basés sur les rôles ou les permissions des utilisateurs. Décidez quels utilisateurs ou groupes d'utilisateurs doivent avoir un accès en lecture ou en écriture à des object stores ou des données spécifiques dans IndexedDB. Utilisez ces contrôles d'accès de manière cohérente dans toute votre application.

4. Valider et assainir les entrées utilisateur : Lorsque vous acceptez des entrées utilisateur qui seront stockées dans IndexedDB, validez et assainissez ces entrées pour prévenir les vulnérabilités de sécurité potentielles comme les injections SQL ou les attaques de type cross-site scripting. Utilisez des règles de validation strictes et échappez ou supprimez tout caractère ou script malveillant.

const sanitizedInput = input.replace(/[<>]/g, ''); // assainissement simple

5. Utiliser une communication sécurisée : Si votre application communique avec un serveur pour synchroniser les données IndexedDB, assurez-vous que le canal de communication est sécurisé. Utilisez HTTPS/SSL pour chiffrer les données transmises entre le client et le serveur, empêchant ainsi l'écoute ou la falsification.

<form action="https://yourserver.com/submit" method="post">
  <input type="text" name="data">
  <input type="submit" value="Submit">
</form>

N'oubliez pas que la sécurité est un processus continu, et il est important de rester à jour avec les meilleures pratiques de sécurité et les vulnérabilités les plus récentes. Examinez et mettez à jour régulièrement vos mesures de sécurité pour protéger les données sensibles et maintenir votre implémentation IndexedDB en sécurité.

Stockage de données hors ligne et synchronisation

L'un des principaux avantages d'IndexedDB est sa capacité à stocker des données hors ligne et à permettre une fonctionnalité hors ligne dans les applications web. Avec IndexedDB, vous pouvez stocker les données de l'application localement sur l'appareil de l'utilisateur, leur permettant d'accéder à l'application et d'interagir avec elle même lorsqu'ils ne sont pas connectés à Internet.

// Stocker des données hors ligne
function storeDataOffline(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Données stockées hors ligne");
  };
}

// Synchroniser les données une fois en ligne
function syncDataWithServer() {
  let transaction = db.transaction(["MyObjectStore"], "readonly");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.openCursor();

  request.onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
      let data = cursor.value;
      sendDataToServer(data);
      cursor.continue();
    } else {
      console.log("Toutes les données synchronisées avec le serveur");
    }
  };
}

// Envoyer les données au serveur
function sendDataToServer(data) {
  fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
    .then(response => {
      if (response.ok) {
        console.log("Données synchronisées avec le serveur");
      }
    });
}

La fonction storeDataOffline stocke les données dans IndexedDB lorsque l'application est hors ligne. Les données sont ajoutées à un object store dans une transaction. Plus tard, lorsque l'application se reconnecte, la fonction syncDataWithServer utilise un curseur pour parcourir toutes les données stockées et envoie chaque élément de données au serveur en utilisant la fonction sendDataToServer. Ainsi, l'application peut fonctionner hors ligne et synchroniser les données avec le serveur lorsque la connexion est rétablie.

Mise en cache des données de l'application

IndexedDB peut être utilisé comme mécanisme de mise en cache pour stocker localement des données fréquemment consultées ou lentes à charger. En mettant en cache les données dans IndexedDB, vous pouvez améliorer les performances et la vitesse de votre application web.

// Vérifier le cache pour les données
function getDataFromCache(key) {
  return new Promise((resolve, reject) => {
    let transaction = db.transaction(["CacheStore"], "readonly");
    let objectStore = transaction.objectStore("CacheStore");

    let request = objectStore.get(key);

    request.onsuccess = function(event) {
      let data = event.target.result;
      if (data) {
        console.log("Données récupérées du cache");
        resolve(data);
      } else {
        console.log("Données non trouvées dans le cache");
        reject();
      }
    };
  });
}

// Stocker les données dans le cache
function storeDataInCache(key, data) {
  let transaction = db.transaction(["CacheStore"], "readwrite");
  let objectStore = transaction.objectStore("CacheStore");

  let request = objectStore.put(data, key);

  request.onsuccess = function(event) {
    console.log("Données stockées dans le cache");
  };
}

// Obtenir les données du cache ou les récupérer du serveur
function getData(key) {
  getDataFromCache(key)
    .then(data => {
      console.log("Données récupérées du cache :", data);
    })
    .catch(() => {
      fetch(`https://api.example.com/data/${key}`)
        .then(response => response.json())
        .then(data => {
          console.log("Données récupérées du serveur :", data);
          storeDataInCache(key, data);
        });
    });
}

La fonction getDataFromCache vérifie si les données demandées sont disponibles dans le cache (IndexedDB). Si les données sont trouvées, elles sont résolues et renvoyées. Si les données ne sont pas trouvées dans le cache, la fonction rejette, et la fonction getData récupère les données du serveur en utilisant l'API fetch. Une fois les données récupérées du serveur, elles sont stockées dans le cache à l'aide de la fonction storeDataInCache pour un accès futur.

En implémentant ce mécanisme de mise en cache, vous pouvez réduire le nombre de requêtes réseau et améliorer la vitesse de chargement de votre application en servant les données depuis le cache local lorsqu'elles sont disponibles.

Implémentation de la fonctionnalité de recherche

Les capacités d'indexation d'IndexedDB le rendent bien adapté pour implémenter une fonctionnalité de recherche dans une application web. En créant des index sur les champs recherchables, vous pouvez rapidement rechercher et récupérer des données basées sur des critères spécifiques.

// Créer un index sur un champ recherchable
function createSearchIndex() {
  let request = indexedDB.open("MyDatabase", 1);

  request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let objectStore = db.createObjectStore("ProductStore", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
  };
}

// Rechercher des données en utilisant l'index
function searchData(searchTerm) {
  let transaction = db.transaction(["ProductStore"], "readonly");
  let objectStore = transaction.objectStore("ProductStore");
  let index = objectStore.index("name");

  let request = index.getAll(IDBKeyRange.bound(searchTerm, searchTerm + '\uffff'));

  request.onsuccess = function(event) {
    let results = event.target.result;
    console.log("Résultats de la recherche :", results);
  };
}

// Exemple d'utilisation
createSearchIndex();

// Ajouter des données d'exemple
let transaction = db.transaction(["ProductStore"], "readwrite");
let objectStore = transaction.objectStore("ProductStore");
objectStore.add({ id: 1, name: "Pomme", category: "Fruit" });
objectStore.add({ id: 2, name: "Banane", category: "Fruit" });
objectStore.add({ id: 3, name: "Orange", category: "Fruit" });

// Effectuer une recherche
searchData("Pom");

Nous créons un index sur le champ "name" de l'object store "ProductStore" en utilisant la fonction createSearchIndex. Cela permet une recherche efficace basée sur le nom du produit.

La fonction searchData effectue une recherche en utilisant l'index. Elle prend un terme de recherche en entrée et utilise la méthode getAll avec un IDBKeyRange pour trouver tous les produits qui correspondent au terme de recherche.

Dans l'exemple d'utilisation, nous créons l'index de recherche, ajoutons quelques données d'exemple à l'object store "ProductStore", puis effectuons une recherche de produits avec "Pom" dans leur nom. Les résultats de la recherche sont affichés dans la console.

Ce ne sont que quelques exemples de la façon dont IndexedDB peut être utilisé dans des scénarios pratiques. La flexibilité et les fonctionnalités puissantes d'IndexedDB le rendent adapté à un large éventail de cas d'utilisation où le stockage et la manipulation de données côté client sont nécessaires.