← Tous les chapitresChapitre 12 · ~35 min

localStorage, sessionStorage & cookies

Stocker l’état entre deux visites ou le temps d’un onglet, et partager des cookies.

📖 Légende des termes▾

localStorage: Stockage persistant du navigateur : survit aux rechargements et aux fermetures du navigateur. ~5 Mo par domaine, API synchrone.
sessionStorage: Comme localStorage mais limité à l’onglet courant : la donnée disparaît quand l’onglet se ferme.
Cookie: Petite donnée (max ~4 Ko) envoyée avec chaque requête, avec une date d’expiration (max-age en secondes) et un path.
JSON: Format texte qui représente des données (objets, tableaux). Lecture : JSON.parse, écriture : JSON.stringify.
Sérialisation: Action de transformer un objet JavaScript en chaîne de caractères pour le stocker ou le transmettre.

localStorage stocke des paires clé/valeur en texte, persistant entre les sessions, sans date d’expiration.

setItem(key, value) écrit, getItem(key) lit, removeItem(key) efface.
Les valeurs sont toujours des chaînes : on sérialise les objets avec JSON.
Limite ~5 Mo par origine, lu de façon synchrone : éviter les données volumineuses.

src/lib/persistance.jsjs

const CLE = 'panier'

function chargerPanier() {
  const brut = localStorage.getItem(CLE)
  return brut ? JSON.parse(brut) : []
}

function sauverPanier(articles) {
  localStorage.setItem(CLE, JSON.stringify(articles))
}

sauverPanier([{ id: 1, nom: 'Livre' }])
console.log(chargerPanier()) // [{ id: 1, nom: 'Livre' }]