IndexedDB en javascript est une API web permettant de stocker des données de manière persistante dans le navigateur du visiteur. Contrairement à localStorage qui est synchrone et limité en taille, IndexedDB est asynchrone et conçu pour gérer de grandes quantités de données. Il est idéal pour des applications web complexes nécessitant un stockage local avancé, comme des applications hors ligne.

Ceci est la deuxième partie de notre tutoriel sur IndexedDB. Si vous ne l’avez lu, commencez par la première partie : API IndexedDB en Javascript : Stockage en base de données

Gestion de Tâches

Vous pouvez tester le gestionnaire de tâches ci-dessus. Ajoutez une ou plusieurs tâches, supprimez-en, fermez votre navigateur, revenez. Il se souvient de tout !

Pourquoi utiliser IndexedDB ?

Stockage asynchrone : IndexedDB ne bloque pas le thread principal, ce qui améliore les performances.
Support des transactions : Les opérations de lecture et d’écriture sont atomiques, ce qui garantit l’intégrité des données.
Indexation avancée : Vous pouvez créer des index pour accéder rapidement aux données.
Support de types de données variés : IndexedDB peut stocker des objets JavaScript complexes.

Création d’un gestionnaire de tâches avec IndexedDB

Pour commencer, nous allons créer une base de données, une object store (équivalent à une table en base de données relationnelle) et effectuer des opérations de base comme l’ajout, la lecture, la mise à jour et la suppression de données.

Imaginons que nous voulons créer une application de gestion de tâches. Nous allons utiliser IndexedDB pour stocker les tâches localement.

Ouvrir une base de données

let db;
const request = indexedDB.open('taskDatabase', 1);

request.onerror = function(event) {
    console.log('Erreur d\'ouverture de la base de données:', event);
};

request.onsuccess = function(event) {
    db = event.target.result;
    console.log('Base de données ouverte avec succès');
};

request.onupgradeneeded = function(event) {
    db = event.target.result;
    const objectStore = db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
    objectStore.createIndex('taskName', 'taskName', { unique: false });
    console.log('Object store créée et index ajouté');
};

Ajouter une tâche

function addTask(taskName) {
    const transaction = db.transaction(['tasks'], 'readwrite');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.add({ taskName: taskName });

    request.onsuccess = function(event) {
        console.log('Tâche ajoutée:', event.target.result);
    };

    request.onerror = function(event) {
        console.log('Erreur d\'ajout de la tâche:', event);
    };
}

// Exemple d'utilisation
addTask('Apprendre IndexedDB');

Lire les tâches

function getTasks() {
    const transaction = db.transaction(['tasks'], 'readonly');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.getAll();

    request.onsuccess = function(event) {
        console.log('Tâches:', event.target.result);
    };

    request.onerror = function(event) {
        console.log('Erreur de lecture des tâches:', event);
    };
}

// Exemple d'utilisation
getTasks();

Mettre à jour une tâche

function updateTask(id, newTaskName) {
    const transaction = db.transaction(['tasks'], 'readwrite');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.get(id);

    request.onsuccess = function(event) {
        const task = event.target.result;
        task.taskName = newTaskName;
        const updateRequest = objectStore.put(task);

        updateRequest.onsuccess = function() {
            console.log('Tâche mise à jour:', task);
        };

        updateRequest.onerror = function(event) {
            console.log('Erreur de mise à jour de la tâche:', event);
        };
    };

    request.onerror = function(event) {
        console.log('Erreur de récupération de la tâche:', event);
    };
}

// Exemple d'utilisation
updateTask(1, 'Apprendre IndexedDB en profondeur');

Supprimer une tâche

function deleteTask(id) {
    const transaction = db.transaction(['tasks'], 'readwrite');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.delete(id);

    request.onsuccess = function() {
        console.log('Tâche supprimée:', id);
    };

    request.onerror = function(event) {
        console.log('Erreur de suppression de la tâche:', event);
    };
}

// Exemple d'utilisation
deleteTask(1);

IndexedDB est une API puissante pour gérer le stockage local de données dans les applications web. Elle offre une grande flexibilité et est conçue pour gérer de grandes quantités de données de manière asynchrone. Nous avons vu comment ouvrir une base de données, créer une object store, et effectuer des opérations CRUD (Create, Read, Update, Delete) de base. En comprenant ces concepts, vous pouvez commencer à utiliser IndexedDB dans vos projets web pour améliorer les performances et l’expérience utilisateur.

Le code HTML et CSS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application de Gestion de Tâches</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Gestion de Tâches</h1>
        <form id="taskForm">
            <input type="text" id="taskInput" placeholder="Nouvelle tâche" required>
            <button type="submit">Ajouter</button>
        </form>
        <ul id="taskList"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

Le fichier styles.css :

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

.container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

form {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 10px;
    width: calc(100% - 22px);
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    border: none;
    background: #5cb85c;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #4cae4c;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background: #f9f9f9;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li button {
    background: #d9534f;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

li button:hover {
    background: #c9302c;
}

Le fichier javascript : `app.js`

let db;

document.addEventListener('DOMContentLoaded', () => {
    const request = indexedDB.open('taskDatabase', 1);

    request.onerror = function(event) {
        console.log('Erreur d\'ouverture de la base de données:', event);
    };

    request.onsuccess = function(event) {
        db = event.target.result;
        console.log('Base de données ouverte avec succès');
        displayTasks();
    };

    request.onupgradeneeded = function(event) {
        db = event.target.result;
        const objectStore = db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
        objectStore.createIndex('taskName', 'taskName', { unique: false });
        console.log('Object store créée et index ajouté');
    };

    document.getElementById('taskForm').addEventListener('submit', addTask);
});

function addTask(event) {
    event.preventDefault();
    const taskInput = document.getElementById('taskInput');
    const taskName = taskInput.value;

    const transaction = db.transaction(['tasks'], 'readwrite');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.add({ taskName: taskName });

    request.onsuccess = function() {
        console.log('Tâche ajoutée:', taskName);
        taskInput.value = '';
        displayTasks();
    };

    request.onerror = function(event) {
        console.log('Erreur d\'ajout de la tâche:', event);
    };
}

function displayTasks() {
    const taskList = document.getElementById('taskList');
    taskList.innerHTML = '';

    const transaction = db.transaction(['tasks'], 'readonly');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.getAll();

    request.onsuccess = function(event) {
        const tasks = event.target.result;
        tasks.forEach(task => {
            const li = document.createElement('li');
            li.textContent = task.taskName;

            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Supprimer';
            deleteButton.addEventListener('click', () => deleteTask(task.id));

            li.appendChild(deleteButton);
            taskList.appendChild(li);
        });
    };

    request.onerror = function(event) {
        console.log('Erreur de lecture des tâches:', event);
    };
}

function deleteTask(id) {
    const transaction = db.transaction(['tasks'], 'readwrite');
    const objectStore = transaction.objectStore('tasks');
    const request = objectStore.delete(id);

    request.onsuccess = function() {
        console.log('Tâche supprimée:', id);
        displayTasks();
    };

    request.onerror = function(event) {
        console.log('Erreur de suppression de la tâche:', event);
    };
}

Avec ce code, vous avez une application simple de gestion de tâches utilisant IndexedDB pour stocker les tâches localement. L’application permet d’ajouter, afficher et supprimer des tâches, tout en utilisant les fonctionnalités de stockage asynchrone et persistant offertes par IndexedDB.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr

Créa-blog

Démo API IndexedDB en Javascript : Un gestionnaire de tâches

Gestion de Tâches

Pourquoi utiliser IndexedDB ?

Création d’un gestionnaire de tâches avec IndexedDB

Ouvrir une base de données

Ajouter une tâche

Lire les tâches

Mettre à jour une tâche

Supprimer une tâche

Le code HTML et CSS

Le fichier javascript : `app.js`

Démo API IndexedDB en Javascript : Un gestionnaire de tâches

Gestion de Tâches

Pourquoi utiliser IndexedDB ?

Création d’un gestionnaire de tâches avec IndexedDB

Ouvrir une base de données

Ajouter une tâche

Lire les tâches

Mettre à jour une tâche

Supprimer une tâche

Le code HTML et CSS

Le fichier javascript : app.js

Articles relatifs

Le fichier javascript : `app.js`