N° 027 · ●●○

Compteur qui se souvient

Un compteur qui retrouve sa valeur après un rechargement, grâce à localStorage, et qui se synchronise entre deux onglets. Le bon exercice pour donner de la mémoire à une page.

Ce qu'on apprend

Lire et écrire dans localStorage
Convertir proprement ce qui revient du stockage
Synchroniser deux onglets avec l'événement storage

Pourquoi ce langage

Pourquoi un compteur qui se souvient ? Un compteur qui revient à zéro dès qu'on recharge la page ne sert pas à grand-chose. Le navigateur offre un petit espace de stockage par site : localStorage.

On y range des textes, sous une clé. À chaque changement, on écrit. Au chargement, on relit. Et quand un autre onglet modifie la même clé, le navigateur prévient avec l'événement storage.

Pourquoi en JavaScript simple ? Deux méthodes, getItem et setItem, et une conversion en nombre. Attention : dans la démo, le cadre isolé bloque le stockage. La valeur y est gardée en mémoire, et le code complet marche dans une vraie page.

Comment ça marche

LA CLÉ
Une clé précise évite de mélanger les données de plusieurs widgets.
```
const CLE = 'compteur-memoire';
```

LIRE

localStorage ne garde que du texte : on convertit, et on prévoit le cas vide.

function lire() {
  const v = parseInt(localStorage.getItem(CLE), 10);
  return Number.isNaN(v) ? 0 : v;
}

ÉCRIRE

Dans un iframe isolé ou en navigation privée, l'accès peut lever une erreur.

function sauver(v) {
  try { localStorage.setItem(CLE, String(v)); }
  catch { /* stockage bloqué : la valeur reste en mémoire */ }
}

LE COMPTEUR

let valeur = lire();
function changer(d) {
  valeur += d;
  document.getElementById('val').textContent = valeur;
  sauver(valeur);
}

ENTRE ONGLETS

storage se déclenche dans les AUTRES onglets du même site, pas dans celui qui écrit.

window.addEventListener('storage', e => {
  if (e.key === CLE) {
    valeur = lire();
    document.getElementById('val').textContent = valeur;
  }
});

Pièges

PIÈGE 1 : Oublier que tout est du texte

Piège

Mauvais : localStorage.getItem('n') + 1. On obtient '51' au lieu de 6.

Fix

Correct : parseInt à la lecture, String à l'écriture, et JSON.stringify pour un objet.

PIÈGE 2 : Croire que le stockage marche toujours

Piège

Mauvais : appeler localStorage sans précaution. Dans un iframe isolé ou certains navigateurs privés, ça lève une erreur et tout le script s'arrête.

Fix

Correct : un try et catch autour des accès, avec une valeur gardée en mémoire en secours.

PIÈGE 3 : Y ranger des données sensibles

Piège

Mauvais : stocker un jeton de connexion ou des infos personnelles. Tout script de la page peut les lire.

Fix

Correct : localStorage pour les préférences et les petits états, un cookie httpOnly côté serveur pour le reste.

PERSONNALISER

Gardez aussi la date du dernier clic, dans un objet sérialisé en JSON.
Un historique des dix dernières valeurs, pour annuler un clic de trop.
Un bouton Exporter qui télécharge la valeur dans un petit fichier.

OPTIMISATION

Si les changements sont très rapides, écrivez au plus une fois toutes les 300 millisecondes.
Préfixez vos clés avec le nom du site pour ne jamais écraser celles d'une autre application sur le même domaine.

VERS REACT

Un hook useStoredState(cle, defaut) qui lit au premier rendu et écrit dans un useEffect à chaque changement.

Avec un rendu serveur comme Next.js, localStorage n'existe pas côté serveur : lisez-le seulement dans le navigateur.

L'écouteur storage se pose et se retire dans un useEffect.

Commentaires

Chargement des commentaires…