Stockage Client : Le Web sans Internet ?
Dans une architecture moderne (Jamstack, PWA, Apps), le navigateur n'est plus un simple lecteur de documents. C'est une base de données à part entière.
Le match du stockage navigateur
Clique sur une technologie : compare sa capacité, sa survie et son mode d'accès.
LocalStorage
Le "Sac à dos"
- ✅ Simple : Clé-Valeur (String uniquement).
- ✅ Persistant : Reste après fermeture.
- ❌ Bloquant : Synchrone (peut geler l'UI si gros volume).
- ❌ Limité : ~5 Mo max.
const user = JSON.parse(localStorage.getItem('user'));
IndexedDB (via Dexie.js)
L'Entrepôt Géant
- ✅ Massif : Stocke objets, fichiers, images (GBs !).
- ✅ Performant : Asynchrone (ne bloque pas l'écran).
- ✅ Complexe : Indexation possible pour recherche rapide.
- ⚠️ API Native : Horrible. Utilisez Dexie.js.
Cas d'Usage Réels (Production)
TikTok / Insta (Offline)
Quand tu scrolles dans le métro sans réseau, tu vois les vidéos déjà chargées ?
Jeux Web & Assets
Sauvegarder la progression, l'inventaire et les textures d'un jeu.
Jamstack (Netlify)
Un site statique n'a pas de serveur backend pour stocker les sessions.
Le Boss Final : Safari & ITP
Intelligent Tracking Prevention
Apple est très strict sur la vie privée. Sur Safari (iOS/Mac), si un utilisateur n'interagit pas avec ton site pendant 7 jours, tout le stockage local (LocalStorage, IndexedDB, Service Workers) est SUPPRIMÉ AUTOMATIQUEMENT.
Cycle de vie d'une donnée locale
Clique sur « Étape suivante » : suis la donnée du setItem() jusqu'à la purge Safari ITP… et son sauvetage.
terminal://simulator Interactive
1. Hello World
Sauvegarde "Eau" = "10L".
2. Hacker Éthique
Essaie d'injecter <script>.
3. Clean Up
Vide le stockage.