Discussion :

[Tamzoro]

Bonjour,

J'ai 3 pages sur mon formulaire.

La première page contient 3 champs (name, phoneNumber, email)

Le visiteur entre les informations



Ensuite on a une seconde page avec 3 champs (address, zipCode, City)



Il y a un titre "first visit", si le visiteur visite le site plusieurs fois, j'aimerai masquer ce titre.

On aura plus que ceci comme affichage



Puis la dernière page



Je me demande vraiment comment créer ce local storage? J'ai un peu chercher sur MDN mais je trouve pas ça aussi simple pour un débutant comme moi.
https://developer.mozilla.org/fr/doc...w/localStorage


Est-ce que vous connaissez un bon tuto pour débutant ou m'aider à solutionner le problème, s'il vous plait?

Voici une idée de mon code -> https://stackblitz.com/edit/single-p...component.html

[krakatoa]

valeur simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
//Ajout d'un objet dans la mémoire de l'ordinateur
 localStorage.setItem('monObjet', 'maValeur');
//Récupération de l'objet
const monObjet:string = localStorage.getItem('monObjet');

objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
//Stockage d'un objet plus compliqué
localStorage.setItem('monObjet', JSON.stringify(monObjet));
//Récupération de l'objet
const monObjet = JSON.parse(localStorage.getItem('monObjet'));

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
localStorage.removeItem('monObjet');
localStorage.clear()

https://medium.com/@nixonaugustine5/...p-65cda19283a0

[Tamzoro]

Bonjour,

Ah c'est pas un getItem qui faut utiliser?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 this.firsttime = localStorage.getItem('firsttime');
 
        if (
          localStorage.getItem('firsttime') == null ||
          localStorage.getItem('firsttime') == undefined
        ) {
          this.firsttime = 'true';
          localStorage.setItem('firsttime', 'true');
        } else localStorage.setItem('firsttime', 'false');

Ca a l'air de fonctionner...

https://stackblitz.com/edit/angular-...p.component.ts

[krakatoa]

Ah c'est pas un getItem qui faut utiliser?

heuu si, c'est ce que j'ai écris.

est ce que tu enregistres dans le localstorage dans le but de résoudre la perte de données suite à F5 (rafraichissement de la page) ?
ou y a t'il une autre raison ?

[Tamzoro]

Ah désolé, j'ai mal vu...

En fait, ce que j'aimerai faire un peu plus tard. C'est d'avoir une database avec des users. Et que lorsque le user xxxx complète les différents champs, le titre "first visit" devrait disparaître à partir de la deuxième connexion sur la page.

[krakatoa]

en fait, le localStorage on l'utilise que pour sauvegarder des données en local (pour résoudre la perte de données suite à un F5)

parcequement normalement, on sauvegarde les données dans un service (perdu si F5)
pour être, bien sur, enregistré en base

le localstorage, faut éviter de l'utiliser si possible.


c'est pour une entreprise ou perso ?
j'ai une remarque à faire pour améliorer le code

[Tamzoro]

Ah ok merci pour toutes ces précisions, c'est pas mieux alors de détecter la première connexion via un user data ?

[krakatoa]

à l'inscription, dans la table user, tu mets un flag que tu nommes : hasDoingFirstLogin qui est à false

quand l'utilisateur se connecte, le serveur reçoit les identifiants, regarde hasDoingFirstLogin si false tu le met à true
et dans le retour vers angular tu indiques que c'est la 1ere co


les proch login le hasDoingFirstLogin sera à true donc il n'y aura rien à faire

[Tamzoro]

Merci pour toutes ces précisions, je vais essayer de reproduire ça dans la semaine...