APIs Navigateur Essentielles : LocalStorage, Fetch API et Canvas
Un guide complet sur les trois APIs navigateur les plus importantes pour créer des applications web modernes, performantes et interactives en 2026.
Introduction aux APIs Navigateur Modernes
Les APIs navigateur (Browser APIs) sont des interfaces JavaScript fournies par le navigateur qui permettent d'interagir avec différentes fonctionnalités du navigateur et du système de l'utilisateur. Contrairement aux fonctionnalités de base de JavaScript, ces APIs sont spécifiques à l'environnement navigateur.
Pourquoi maîtriser ces 3 APIs en 2026 ?
- LocalStorage : Pour des applications web qui fonctionnent hors ligne (PWA)
- Fetch API : Pour des applications dynamiques avec données en temps réel
- Canvas : Pour des visualisations de données, jeux, et animations complexes
- Performance : Meilleure expérience utilisateur sans rechargement de page
- Modernité : Technologies demandées par le marché du travail
Compatibilité des APIs
Ces trois APIs sont largement supportées par tous les navigateurs modernes :
| API | Chrome | Firefox | Safari | Edge | Support Global |
|---|---|---|---|---|---|
| LocalStorage | ✅ 4+ | ✅ 3.5+ | ✅ 4+ | ✅ 12+ | 98.7% |
| Fetch API | ✅ 42+ | ✅ 39+ | ✅ 10.1+ | ✅ 14+ | 97.5% |
| Canvas | ✅ 4+ | ✅ 2+ | ✅ 3.1+ | ✅ 12+ | 99.1% |
📦 LocalStorage - Le Stockage Local Persistant
LocalStorage est une API Web Storage qui permet de stocker des données localement dans le navigateur de l'utilisateur. Les données persistent même après la fermeture du navigateur.
Principes de base
localStorage.setItem("nom", "Alice");
localStorage.setItem("age", "30");
// Récupérer une donnée
const nom = localStorage.getItem("nom");
console.log(nom); // "Alice"
// Supprimer une donnée
localStorage.removeItem("age");
// Vider tout le stockage
localStorage.clear();
// Nombre d'éléments stockés
const taille = localStorage.length;
💾 Démo Interactive LocalStorage
Stocker des objets complexes
LocalStorage ne stocke que des chaînes de caractères. Pour stocker des objets, utilisez JSON.stringify() et JSON.parse() :
const utilisateur = {
nom: "Marie",
age: 28,
email: "marie@example.com",
preferences: {
theme: "sombre",
notifications: true
}
};
// Conversion et stockage
localStorage.setItem("utilisateur", JSON.stringify(utilisateur));
// Récupération et conversion
const utilisateurStocke = JSON.parse(localStorage.getItem("utilisateur"));
console.log(utilisateurStocke.nom); // "Marie"
⚠️ Limitations importantes de LocalStorage
- Taille limitée : Généralement 5-10 MB par domaine
- Données non cryptées : Accessibles via les outils de développement
- Synchronisation limitée : Uniquement dans le même navigateur
- Pas d'accès depuis le serveur : Côté client uniquement
- Pas de transactions : Opérations atomiques impossibles
🌐 Fetch API - La Communication Réseau Moderne
L'API Fetch fournit une interface JavaScript pour effectuer des requêtes réseau (comme XMLHttpRequest) mais avec une syntaxe plus moderne et puissante, basée sur les Promises.
Requête GET simple
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Erreur réseau');
}
return response.json(); // Convertir en JSON
})
.then(data => {
console.log('Données reçues:', data);
})
.catch(error => {
console.error('Erreur:', error);
});
Version moderne avec Async/Await
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`Erreur HTTP: ${response.status}`);
}
const data = await response.json();
console.log('Données:', data);
return data;
} catch (error) {
console.error('Erreur de requête:', error);
}
}
Requêtes POST avec en-têtes personnalisés
const userData = {
username: "john_doe",
email: "john@example.com"
};
async function postData() {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer votre-token-ici'
},
body: JSON.stringify(userData)
});
const result = await response.json();
console.log('Réponse:', result);
}
🌐 Types de réponses supportées
response.json()- Pour les données JSONresponse.text()- Pour le texte brutresponse.blob()- Pour les fichiers binaires (images, PDF)response.arrayBuffer()- Pour les données binaires brutesresponse.formData()- Pour les données de formulaire
🔄 Démo Fetch API (API Publique)
🎨 Canvas - Graphiques et Animations Dynamiques
L'API Canvas permet de dessiner des graphiques, des animations, et des jeux directement dans le navigateur via un élément HTML <canvas> et son contexte JavaScript.
Configuration de base
<canvas id="monCanvas" width="800" height="600">
Votre navigateur ne supporte pas Canvas
</canvas>
// JavaScript - Récupérer le contexte
const canvas = document.getElementById('monCanvas');
const ctx = canvas.getContext('2d');
// Vérifier la compatibilité
if (!ctx) {
alert('Votre navigateur ne supporte pas Canvas !');
}
Dessiner des formes basiques
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 200, 100);
// Rectangle contour seulement
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.strokeRect(300, 50, 150, 150);
// Effacer une zone
ctx.clearRect(100, 100, 50, 50);
// Cercle (arc)
ctx.beginPath();
ctx.arc(400, 300, 60, 0, Math.PI * 2);
ctx.fillStyle = '#2ecc71';
ctx.fill();
ctx.stroke();
🖌️ Canvas Interactif
💡 Astuce : Cliquez et dessinez sur le canvas ci-dessus !
Animation avec Canvas
let ballY = 50;
let ballSpeedX = 3;
let ballSpeedY = 2;
function animateBall() {
// Effacer le canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Mettre à jour la position
ballX += ballSpeedX;
ballY += ballSpeedY;
// Rebond sur les bords
if (ballX > canvas.width - 20 || ballX < 20) {
ballSpeedX = -ballSpeedX;
}
if (ballY > canvas.height - 20 || ballY < 20) {
ballSpeedY = -ballSpeedY;
}
// Dessiner la balle
ctx.beginPath();
ctx.arc(ballX, ballY, 20, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();
// Prochaine frame
requestAnimationFrame(animateBall);
}
// Démarrer l'animation
animateBall();
🔧 Cas Pratique : Application Météo Complète
Créons une application météo qui combine les trois APIs : LocalStorage pour les préférences, Fetch API pour les données météo, et Canvas pour la visualisation.
constructor() {
this.apiKey = 'votre-cle-api';
this.loadPreferences();
}
// 1. LocalStorage : Gérer les préférences
loadPreferences() {
const prefs = localStorage.getItem('weatherPrefs');
this.preferences = prefs ? JSON.parse(prefs) : {
city: 'Paris',
units: 'metric',
theme: 'light'
};
}
savePreferences() {
localStorage.setItem(
'weatherPrefs',
JSON.stringify(this.preferences)
);
}
// 2. Fetch API : Récupérer les données météo
async fetchWeather(city) {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${this.preferences.units}&appid=${this.apiKey}`
);
if (!response.ok) {
throw new Error('Ville non trouvée');
}
const data = await response.json();
this.displayWeather(data);
this.drawChart(data);
} catch (error) {
console.error('Erreur météo:', error);
}
}
// 3. Canvas : Visualisation des données
drawChart(weatherData) {
const canvas = document.getElementById('weatherChart');
const ctx = canvas.getContext('2d');
// Effacer et dessiner le graphique
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Exemple : Graphique de température
const temp = weatherData.main.temp;
const maxTemp = weatherData.main.temp_max;
const minTemp = weatherData.main.temp_min;
// Dessiner les barres du graphique
this.drawBar(ctx, 50, temp, 'Température actuelle', '#3498db');
this.drawBar(ctx, 150, maxTemp, 'Maximale', '#e74c3c');
this.drawBar(ctx, 250, minTemp, 'Minimale', '#2ecc71');
}
drawBar(ctx, x, value, label, color) {
// Implémentation du dessin de barre
ctx.fillStyle = color;
ctx.fillRect(x, 300 - value * 3, 80, value * 3);
ctx.fillStyle = '#333';
ctx.font = '14px Arial';
ctx.fillText(label, x, 320);
ctx.fillText(`${value}°C`, x, 340);
}
}
// Initialiser l'application
const weatherApp = new WeatherApp();
📱 Architecture de l'application
- LocalStorage : Stocke ville préférée, unités (C/F), thème
- Fetch API : Récupère données météo en temps réel
- Canvas : Affiche graphiques de température, humidité, vent
- Service Workers (bonus) : Pour fonctionnement hors ligne
- IndexedDB (bonus) : Pour historique des données
🚀 Bonnes Pratiques & Optimisations
Pour LocalStorage
function safeSetItem(key, value) {
try {
localStorage.setItem(key, value);
return true;
} catch (e) {
if (e.name === 'QuotaExceededError') {
// Nettoyer les anciennes données
localStorage.clear();
console.warn('LocalStorage nettoyé (quota dépassé)');
}
return false;
}
}
// 2. Compression simple (pour gagner de l'espace)
function compressData(data) {
return btoa(JSON.stringify(data));
}
// 3. Décompression
function decompressData(compressed) {
return JSON.parse(atob(compressed));
}
Pour Fetch API
async function fetchWithTimeout(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
...options,
signal: controller.signal
});
clearTimeout(id);
return response;
} catch (error) {
clearTimeout(id);
throw error;
}
}
// 2. Cache intelligent
const cache = new Map();
async function cachedFetch(url) {
if (cache.has(url)) {
const cached = cache.get(url);
if (Date.now() - cached.timestamp < 60000) {
return cached.data;
}
}
const response = await fetch(url);
const data = await response.json();
cache.set(url, {
data: data,
timestamp: Date.now()
});
return data;
}
Pour Canvas
function optimizeCanvas(canvas) {
// Désactiver l'alpha si non nécessaire
const ctx = canvas.getContext('2d', { alpha: false });
// Utiliser la bonne taille (éviter le redimensionnement CSS)
const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
ctx.scale(dpr, dpr);
return ctx;
}
// 2. Double buffering pour animations fluides
function createDoubleBuffer(width, height) {
const buffer = document.createElement('canvas');
buffer.width = width;
buffer.height = height;
return buffer.getContext('2d');
}
// 3. Regrouper les dessins similaires
function batchDrawOperations(ctx, operations) {
// Regrouper par couleur/style
const grouped = operations.reduce((acc, op) => {
const key = `${op.color}-${op.type}`;
if (!acc[key]) acc[key] = [];
acc[key].push(op);
return acc;
}, {});
// Exécuter par groupe
Object.entries(grouped).forEach(([key, ops]) => {
ctx.beginPath();
ctx.fillStyle = ops[0].color;
ops.forEach(op => {
if (op.type === 'rect') {
ctx.rect(op.x, op.y, op.width, op.height);
}
});
ctx.fill();
});
}
🎯 Conclusion : Maîtriser les APIs Navigateur Modernes
Les APIs navigateur modernes ont révolutionné le développement web, permettant de créer des applications riches et performantes qui rivalisent avec les applications natives.
✅ Ce que vous maîtrisez maintenant :
- LocalStorage : Stockage persistant côté client pour préférences et données
- Fetch API : Communication réseau asynchrone moderne et puissante
- Canvas : Création de graphiques, animations et jeux dynamiques
- Intégration : Combinaison des APIs pour des applications complètes
- Optimisation : Bonnes pratiques pour des applications performantes
🚀 Prochaines étapes recommandées
- IndexedDB : Pour des bases de données côté client plus complexes
- Service Workers : Pour les PWA et le fonctionnement hors ligne
- WebGL : Graphiques 3D avancés avec Three.js
- WebSockets : Communication temps réel bidirectionnelle
- WebRTC : Communication peer-to-peer (audio, vidéo, données)
- Geolocation API : Applications basées sur la localisation
💡 Conseil Pro de WebIntelligence
Créez un projet complet ! Combine LocalStorage, Fetch API et Canvas dans une seule application : un tableau de bord météo, un gestionnaire de tâches avec graphiques, ou un jeu simple avec sauvegarde locale. La pratique sur un projet concret est la meilleure façon de consolider vos connaissances.
Rappel : Ces APIs sont supportées par tous les navigateurs modernes, mais pensez toujours à gérer les cas de non-support avec des fallbacks ou des messages appropriés.
❓ Questions Fréquentes sur les APIs Navigateur
Quelle est la différence entre LocalStorage et les cookies ?
LocalStorage stocke 5-10MB de données côté client seulement, accessible uniquement par JavaScript. Les cookies stockent 4KB maximum, sont envoyés avec chaque requête HTTP, et sont accessibles côté serveur aussi.
Fetch API remplace-t-il complètement XMLHttpRequest ?
Oui, Fetch API est la recommandation moderne. Cependant, XMLHttpRequest est toujours supporté pour la compatibilité avec d'anciens codebases. Fetch offre une syntaxe plus propre basée sur les Promises.
Canvas est-il adapté pour des applications de type "tableur" ou beaucoup de texte ?
Non, Canvas n'est pas optimisé pour le texte éditable. Pour des applications riches en texte, préférez le DOM standard. Canvas est idéal pour les graphiques, animations et jeux.
Les données LocalStorage sont-elles sécurisées ?
Non, elles ne sont pas cryptées et sont accessibles via les outils de développement. Ne stockez jamais de données sensibles (mots de passe, informations bancaires) dans LocalStorage.
Quand utiliser Canvas vs SVG ?
Canvas : Pour graphiques complexes, jeux, traitement d'images, beaucoup d'objets animés. SVG : Pour graphiques vectoriels scalables, éléments interactifs individuels, animations CSS simples.
