Veuillez vous connecter à votre compte.
IndexedDB, l'acronyme d'Indexed Database, est une puissante API JavaScript qui permet aux applications web de stocker de grandes quantités de données de manière persistante et structurée directement dans le navigateur des utilisateurs. C'est un peu comme une base de données SQL, mais entièrement stockée côté client.
Utilité de IndexedDB
IndexedDB trouve sa valeur principalement dans la gestion des données côté client pour les applications web. Voici un exemple d'utilisation :
- Applications de notes en ligne - Vous pouvez créer une application de prise de notes rapide, où les utilisateurs écrivent, enregistrent et synchronisent leurs notes. IndexedDB permet de stocker ces notes en toute sécurité dans le navigateur, garantissant une expérience fluide même hors ligne.
- Applications de gestion de tâches - IndexedDB facilite la création d'applications de gestion de tâches où les listes restent intactes même après la fermeture du navigateur. Un peu comme avoir un assistant de productivité qui ne dort jamais.
Comment visualiser une base de données IndexDB ?
Rendez-vous sur la console développeur de votre navigateur en tapant F12 ou en cliquant droit puis en sélectionnant Inspecter. Ensuite, cliquez sur l'onglet Application et recherchez la section IndexedDB.
Exemple pratique : Création d'une application de notes simples
Double taper sur le code pour copier
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Ma Super App de Notes</h1>
<textarea id="note" placeholder="Commencez à écrire votre note ici..."></textarea>
<button id="saveButton">Enregistrer la Note</button>
<ul id="notesList"></ul>
</div>
<script>
const noteTextarea = document.getElementById('note');
const saveButton = document.getElementById('saveButton');
const notesList = document.getElementById('notesList');
const request = indexedDB.open('ma_super_base_de_donnees', 1);
let db;
request.onsuccess = (event) => {
db = event.target.result;
saveButton.addEventListener('click', saveNote);
displayNotes();
};
request.onupgradeneeded = (event) => {
db = event.target.result;
const objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });
objectStore.createIndex('content', 'content', { unique: false });
};
function saveNote() {
const noteContent = noteTextarea.value;
const transaction = db.transaction('notes', 'readwrite');
const objectStore = transaction.objectStore('notes');
objectStore.add({ content: noteContent });
displayNotes(); // Actualise la liste des notes après l'enregistrement
}
function displayNotes() {
notesList.innerHTML = ''; // Efface la liste précédente
const transaction = db.transaction('notes', 'readonly');
const objectStore = transaction.objectStore('notes');
objectStore.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const noteContent = cursor.value.content;
const li = document.createElement('li');
li.textContent = noteContent;
notesList.appendChild(li);
cursor.continue();
}
};
}
</script>
</body>
</html>
Cette application de notes simple utilise IndexedDB pour stocker les notes des utilisateurs. Chaque note est enregistrée avec un contenu et un identifiant unique généré automatiquement. Lorsque les utilisateurs cliquent sur "Enregistrer la Note", la note est ajoutée à la base de données IndexedDB.
IndexedDB est un outil puissant pour gérer des données côté client. Avec sa capacité de stockage considérable, il facilite la création d'applications web remarquables, des notes simples aux applications de gestion sophistiquées. Lancez-vous dans l'univers d'IndexedDB et créez des expériences mémorables pour vos utilisateurs ! 🚀
