localStorage
Stockage du navigateur pour des paires clé-valeur qui survit à l’actualisation de la page et au redémarrage du navigateur.
- Renvoie
getItem()renvoie la chaîne enregistrée ounull. Les autres méthodes renvoientundefined.
Exemple
#localStorage.setItem('theme', 'dark')
localStorage.setItem('level', 7)
console.log(localStorage.getItem('theme'))
console.log(localStorage.getItem('level'), typeof localStorage.getItem('level'))
console.log(localStorage.getItem('avatar'))
localStorage.removeItem('theme')
console.log(localStorage.getItem('theme'))dark 7 string null null
Les exemples de cette page s’exécutent dans un cadre isolé où localStorage n’est pas disponible, donc ce code ne s’exécute pas dans l’aperçu. Sur une page normale, il fonctionne sans problème et affiche le résultat montré ci-dessus.
Définition et utilisation
#localStorage permet d’enregistrer dans le navigateur de petites données qui restent là après la fermeture de l’onglet, quand vous revenez sur la page. Les usages typiques sont le thème choisi, la langue de l’interface, un brouillon de formulaire ou la progression d’une leçon pour un utilisateur non connecté.
Vous enregistrez une donnée avec la méthode setItem(clé, valeur), vous la lisez avec getItem(clé) (renvoie null quand la clé n’existe pas) et vous la supprimez avec removeItem() ou clear(). Les valeurs sont toujours des chaînes de caractères, donc convertissez les objets et les tableaux en JSON avec JSON.stringify(), puis reconvertissez-les après la lecture avec JSON.parse().
Le stockage est séparé pour chaque domaine et contient généralement environ 5 Mo. Chaque script de la page y a accès, donc n’y gardez ni mots de passe ni jetons. Le sessionStorage, qui lui est apparenté, a les mêmes méthodes, mais se vide à la fermeture de l’onglet.
Syntaxe
#localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()
localStorage.lengthParamètres
#key
chaîne
Le nom sous lequel vous enregistrez ou lisez la valeur.value
chaîne
La valeur à enregistrer. Les autres types seront convertis en chaîne.
Plus d’exemples
#const progress = { lesson: 12, points: 340, badges: ['Start', 'Série de 7 jours'] }
localStorage.setItem('progress', JSON.stringify(progress))
const saved = JSON.parse(localStorage.getItem('progress'))
console.log(saved.points)
console.log(saved.badges)
localStorage.setItem('broken', progress)
console.log(localStorage.getItem('broken'))340 ['Start', 'Série de 7 jours'] [object Object]
Dans l’aperçu, localStorage n’est pas disponible, mais le code fonctionne sur une page normale. Les dernières lignes montrent qu’un objet enregistré sans JSON.stringify() se transforme en la chaîne inutile [object Object].
function loadSettings() {
try {
return JSON.parse(localStorage.getItem('settings')) ?? { theme: 'light', sound: true }
} catch {
return { theme: 'light', sound: true }
}
}
console.log(loadSettings()){ theme: 'light', sound: true }Lors de la première visite, rien n’est encore enregistré, donc la fonction renvoie les réglages par défaut. Le bloc try...catch protège aussi contre des données corrompues et contre les cas où le stockage est bloqué, comme dans l’aperçu de cette page.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Avant d’enregistrer des objets, utilisez toujours
JSON.stringify(), puisJSON.parse()après la lecture. - N’enregistrez pas de mots de passe ni de jetons de session dans
localStorage. N’importe quel script de la page peut les lire. - Entourez la lecture et l’écriture d’un bloc
try...catch. En navigation privée ou avec les données de site bloquées, l’accès au stockage peut lever une erreur.
Entrées associées
#- localStorage vs sessionStoragelocalStorage et sessionStorage ont les mêmes méthodes, mais localStorage survit à la fermeture du navigateur, alors que sessionStorage s’efface avec l’onglet.
- sessionStorageStockage du navigateur pour des paires clé-valeur qui ne fonctionne que dans l’onglet actuel et disparaît à sa fermeture.
- JSON.stringify()Transforme une valeur JavaScript, comme un objet ou un tableau, en chaîne de caractères au format JSON.
- JSON.parse()Transforme une chaîne de caractères au format JSON en valeur JavaScript, comme un objet ou un tableau.
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
- MapUne collection de paires clé-valeur dans laquelle la clé peut être n’importe quelle valeur, et où l’ordre d’ajout est conservé.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.