JavaScript : rendre le Web interactif (école d'ingénieur) · Chapitre 11 · Exercice de TD
Deux onglets
Erreurs, stockage et qualité du code · niveau 2
Énoncé
Un client ouvre le catalogue dans deux onglets, ajoute un livre dans le premier, puis un autre dans le second. Que contient le panier enregistré, et que lit chaque onglet ? Que se passerait-il si ajout-panier.js n'appelait pas surveillerPanier ? Pourquoi l'événement storage n'est-il pas reçu par l'onglet qui écrit ?
Corrigé
Les deux onglets partagent le même localStorage. Le premier ajoute le livre A et enregistre [A] ; le second reçoit l'événement storage, relit le panier ([A]) et met à jour sa variable. Quand il ajoute B, il enregistre [A, B] : rien n'est perdu. Sans surveillerPanier, le second onglet aurait gardé en mémoire le panier lu à son ouverture (vide) et enregistré [B], écrasant l'ajout du premier : un bogue silencieux, typique des données partagées. L'onglet qui écrit ne reçoit pas l'événement parce qu'il connaît déjà la nouvelle valeur ; le recevoir le ferait relire inutilement ce qu'il vient d'écrire. Nous l'avons vérifié dans Chromium avec deux onglets.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.