Garder La Valeur D'une Variable Apres Chargement De Page Angular

Salut les codeurs du dimanche ! Vous est-il déjà arrivé de remplir un formulaire en ligne, de changer de page... et pouf, tout a disparu ? Frustrant, n'est-ce pas ? C'est comme préparer un super sandwich, le poser deux secondes, et découvrir qu'il s'est volatilisé. En Angular, c'est pareil avec les variables. On les remplit, et hop, à chaque chargement de page, elles repartent à zéro. Mais rassurez-vous, il existe des solutions pour que vos variables ne prennent pas la poudre d'escampette !

Pourquoi c'est important de garder la valeur d'une variable ?

Imaginez que vous construisez un panier d'achat en ligne. L'utilisateur ajoute des articles, mais à chaque fois qu'il clique sur "ajouter au panier", la page se recharge et le panier est vide ! Catastrophe ! Garder la valeur des variables permet d'éviter ce genre de scénarios. C'est essentiel pour une expérience utilisateur fluide et agréable.

Pensez aussi à un jeu vidéo. Si chaque fois que vous mourez et que la page se recharge, vous perdez tout votre score et devez recommencer depuis le début, vous risquez de vite abandonner le jeu. On veut sauvegarder notre progression, nos succès, nos choix ! C'est pareil pour nos applications Angular : on veut que l'état de l'application soit persistant, même après un rechargement de page.

Must Read

Comment faire concrètement ?

Plusieurs options s'offrent à vous, un peu comme quand vous choisissez l'ingrédient secret de votre sandwich !

, nous avons procédé à une substitution de chaque valeur de la donnée

LocalStorage : C'est comme avoir un petit carnet où vous pouvez noter des informations sur le navigateur de l'utilisateur. Vos données restent même si l'utilisateur ferme son navigateur et le rouvre plus tard. Idéal pour sauvegarder des préférences utilisateur, des informations de connexion...
SessionStorage : Un peu comme le localStorage, mais les données sont effacées quand l'utilisateur ferme son navigateur. Parfait pour les informations temporaires, comme les données d'un formulaire non validé.
Cookies : Le grand classique ! On peut y stocker des petites informations, mais attention, ils peuvent être bloqués par les navigateurs.
Services et Observables (RxJS) : Une solution plus élégante pour gérer l'état de votre application. Vous créez un service qui conserve vos données, et vous utilisez des observables pour les partager entre vos composants. C'est comme avoir un serveur qui gère l'état du sandwich pour tout le monde ! (OK, l'analogie du sandwich commence à devenir un peu bizarre...).

Exemple concret avec localStorage :

Supposons que vous vouliez sauvegarder le nom de l'utilisateur :

Légende de texte présentant la valeur de votre maison. Concept d


localStorage.setItem('nomUtilisateur', 'Jean Dupont');

const nom = localStorage.getItem('nomUtilisateur'); //nom contient 'Jean Dupont'

Facile, non ? N'oubliez pas de toujours tester vos solutions ! Et surtout, de ne pas stocker des informations sensibles (mots de passe, numéros de carte bancaire) dans le localStorage ou les cookies. Soyez prudents, comme quand vous choisissez la bonne sauce pour votre sandwich !

Alors, prêts à faire en sorte que vos variables ne s'enfuient plus ? À vous de jouer !