On repart de notre site de la semaine dernière, une page web interactive avec du javascript.

Étape 0 : Correction des questions pour aujourd’hui

Dans la fonction ajouterContenu(), on crée quatre nouvelles lignes :

// 0. Corrigé du travail donné la dernière fois

function ajouterContenu() {
    let contenu = prompt("Tape ici le contenu");
    let articleElt = document.createElement("article");
    let titreElt = document.createElement("h2");
    titreElt.innerText = "Titre du nouveau contenu";
    articleElt.appendChild(titreElt);
    let sectionElt = document.querySelector("section");
    sectionElt.appendChild(articleElt);
    //créer un paragraphe
    let paraElt = document.createElement("p");
    //y mettre le contenu
    paraElt.innerText = contenu;
    // mettre la classe "special" au paragraphe paraElt
    paraElt.setAttribute("class", "special");  // ou paraElt.className = "special";
    //et ajouter le paragraphe dans l'article
    articleElt.appendChild(paraElt);
}

Aujourd’hui, on voudrait que la page se souvienne de nos ajouts !

Une démo en cliquant ici.

Warning :

• les choix de structures et de boucles que j’ai fait ne sont pas optimaux en javascript, mais c’est un choix pédagogique assumé pour lier le truc avec python.
• D’autre part, l’idée, c’est de « comprendre un max de choses » sur le code proposé, et pas forcément de produire du code. On est borderline quant au programme, mais puisque vous avez accroché pour la plupart avec le javascript et les pages web dynamiques…
• on ne fait pas un stockage optimal : juste dans la mémoire du navigateur, et limité. Il y a mieux !
  • au niveau local, des cookies,
  • au niveau serveur, une base de données… mais là il nous faudra un langage serveur comme php. Et parler de sécurité…
  • on en reparle d’ailleurs la semaine prochaine, c’est pleinement au programme.

On y va étape par étape !
Suivez le guide et la console de développement web !

Étape 1 : une fonction de chargement ?

// 1. A l'ouverture de la page,ou plutôt à la fin du chargement,
// ce qui correspond à l'événement "load", appeler une fonction « charge() »

function charge() {
  console.log("fonction charge() appelée");
}

window.addEventListener("load", charge);

// fin du 1. -> test

Étape 2 : que cette fonction cherche dans le « localStorage » !

// 2. DANS la fonction charge() :
// Récupération de la valeur dans web storage
  var sauv = localStorage.getItem('sauv_users');

  if(sauv != null) {
    console.log('On a trouvé une sauvegarde dans le localStorage');
    console.log(sauv);
  } else {
    console.log("On n'a pas trouvé de sauvegarde dans le localStorage.");
    console.log("On l'initialiser pour notre utilisateur.");
}

// fin du 2. -> test

Étape 3 : un tableau d’utilisateurs qu’on remplit

// 3. a. Au tout début du script, on crée un tableau vide
// qui sera rempli pour chaque utilisateur

var tableauUtilisateurs = [];

// 3. b. Au dessus de la fonction charge,
// Une nouvelle fonction qui va rajouter un utilisateur inconnu dans notre liste

function rajouteNouvelUtilisateur(nom) {
  // création d'un objet (un peu comme un dictionnaire) qui sera notre utilisateur
  let obj = {pseudo : nom, liste : []};
  // on le rajoute à la liste d'utilisateurs
  tableauUtilisateurs.push(obj); // push un peu comme append en python
  // on vérifie dans la console
  console.log(tableauUtilisateurs);
}

// 3. c. Dans le else du test précédent dans la fonction charge(),
// juste après le « console.log("On l'initialiser pour notre utilisateur."); »,
// l'initialisation en question pour le nouvel utilisateur :

    // on ajoute un nouvel utilisateur au tableau avec cette fonction
    rajouteNouvelUtilisateur(nom);

// fin du 3. -> test et bien vérifier dans la console

Étape 4 : enregistrer le contenu qui a été saisi dans notre tableau

// 4. a. On crée une fonction qui va rajouter le contenu saisi 
// à une liste pour qu'on puisse le sauvegarder afin de le retrouver ensuite
// au dessus de la fonction 

function rajouteDansLaBonneListe(contenu){
  // On parcourt le tableau d'utilisateurs
  // 
  for (let i = 0; i < tableauUtilisateurs.length; i++) {
    // On récupère l'objet en cours pour simplifier
    let obj = tableauUtilisateurs[i];
    // si c'est le bon on rajoute le contenu
    if (obj.pseudo === nom) obj.liste.push(contenu);  
  }
  // On vérifie dans la console
  console.log('On a rajouté « ' + contenu + " » à la liste de l'utilisateur " + nom);
  console.log(tableauUtilisateurs);		
}

// 4. b. On modifie la fonction ajouterContenu() pour qu'elle rajoute aussi le contenu
// dans le tableau « liste » du bon objet de la liste « tableauUtilisateurs »
// c'est-à-dire celui dont le pseudo est le contenu de la variable nom
// en appelant la fonction ci-dessous DANS la fonction ajouterContenu() :
  rajouteDansLaBonneListe(contenu);

// fin du 4. -> test et bien vérifier dans la console

Étape 5 : sauvegarder quand on quitte …

// 5. a quand on quitte il faut enregistrer
// On appelle donc une fonction enregistre
// A la toute fin du code :

function enregistre() {
  // on crée une sorte de texte qui sera sauvegardé à partir de notre liste
  let sauv = JSON.stringify(tableauUtilisateurs);
  // On le met dans le « localStorage » du navigateur
  localStorage.setItem('sauv_users', sauv);
}

// 5.b Gestion de la sauvegarde à la sortie, quand on sort de la page web
// C'est l'évènement "unload"
// A la toute fin du code :

window.addEventListener("unload", enregistre);

// fin du 5. -> test : recharge la page
// si c'est bon le script a trouvé quelque chose dans le localStorage !
// vérifier dans l'onglet « stockage » des outils de développement web
// il y a une variable 'sauv_users' dans le « Stockage Local » !

Étape 6 : … pour mieux retrouver le contenu !

// 6. a. Il faut que quand on revienne sur cette page, les utilisateurs enregistrés soient reconnus !
// Dans le « if(sauv != null) » de notre fonction « charge() »,
// après le « console.log(sauv); », rajouter :

    // On récupère notre tableau à partir de la sauvegarde
    tableauUtilisateurs = JSON.parse(sauv);

// 6.b. Il faut tester si on a déjà l'utilisateur dont on a saisi le nom
// On cherche donc si nom est dans les pseudos
// et sinon on le rajoute (DANS LE MEME BLOC)
    
    // On ne l'a pas encore trouve
    let trouve = false;
    let liste =[];
    
    // On parcourt le tableau d'utilisateurs
    for (let i = 0; i < tableauUtilisateurs.length; i++) {
      // On récupère l'objet en cours pour simplifier
      let obj = tableauUtilisateurs[i];
      // si c'est le bon on rajoute le contenu
      if (obj.pseudo === nom) {
		  trouve = true;  
		  liste = obj.liste;
	  }
    }
    
    // A la fin de cette boucle si l'utilisateur dont on a saisi le nom
    // est dans le tableau, le booléen vaut true
    // sinon ... on le rajoute
    if (trouve === true) {
      console.log("On a trouvé l'utilisateur " + nom);
      // il faut rajouter le contenu encore !
      console.log("rajout du contenu éventuel :");
      
    }
    else {
	  console.log("On n'a pas trouvé l'utilisateur " + nom);
	  // on ajoute un nouvel utilisateur au tableau 
      rajouteNouvelUtilisateur(nom);
	}

// 6.c. C'est bien de l'annoncer mais il faut rajouter le contenu éventuel...
// On fait un copier-coller de la fonction « ajouterContenu() »
// et on l'appelle « ajouterContenuSansSauver(contenu) »
// et on enlève simplement la ligne rajoutée au 4.b. dans cette copie
// ainsi que la première ligne qui demande le contenu
// car il a été envoyé en paramètre
// ce qui donne :

function ajouterContenuSansSauver(contenu) {
    let articleElt = document.createElement("article");
    let titreElt = document.createElement("h2");
    titreElt.innerText = "Titre du nouveau contenu";
    articleElt.appendChild(titreElt);
    let sectionElt = document.querySelector("section");
    sectionElt.appendChild(articleElt);
    //créer un paragraphe
    let paraElt = document.createElement("p");
    //y mettre le contenu
    paraElt.innerText = contenu;
    paraElt.className = "special";
    //et ajouter le paragraphe dans l'article
    articleElt.appendChild(paraElt);
}

// 6.d. Il reste à appeler cette fonction pour tous les éléments de 
// la liste récupérée
// donc dans « charge() », après le « console.log("rajout du contenu éventuel :"); »
// on rajoute pour finir :

      // on parcourt la liste trouvée pour rajouter le contenu
      for (let i = 0; i < liste.length; i++) {
        ajouterContenuSansSauver(liste[i]);
        console.log("Rajout de « " + liste[i] + " » réussi !");
      }

// fin du 6. -> test et je l'espère, satisfaction !