Probleme avec localStorage, les données ne restent pas après rafraichissement [Résolu]

Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
- - Dernière réponse : Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
- 17 juin 2019 à 16:06
Bonjour,
J'essaye de créer une page d'ajout de lien où l'on doit rentrer des données dans un formulaire (son prenom, un titre et un lien) pour qu'elles s'affichent ensuite à la suite des autres liens déjà présents.
J'ai réussi pour le moment à ajouter l'affichage du lien sur la page mais je n'arrive pas à le sauvegarder, j'aimerais que ces informations restent sur la page même après rafraichissement.
J'ai essayé avec un localStorage mais je ne parviens pas à le garder en mémoire...
Je vous laisse le code ci dessous, si quelqu'un peut m'aider s'il vous plait :) :

---HTML---
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/liensweb.css">
    <title>Activité 1</title>
</head>

<body>
    <h1>Activité 2</h1>

    <button id="ajout">Ajouter un lien</button>
 
    <div id="formulaire">
        <input type="text" id="prenom" placeholder="Entrez votre prenom">
        <input type="text" id="titreLien" placeholder="Entrez le titre de l'url">
        <input type="text" id="lien" placeholder="Entrez l'url">
        <button id="valideForm">Ajouter</button>
    </div>

    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>

    <script src="../js/liensweb.js"></script>
</body>

</html>


---CSS---
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    margin-left: 30px;
    margin-right: 30px;
}

span {
    font-weight: normal;
    font-size: 80%;
}

.lien {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
}


---JS---
/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
    var titreLien = document.createElement("a");
    titreLien.href = lien.url;
    titreLien.style.color = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight = "5px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    // Cette ligne contient le titre et l'URL du lien
    var ligneTitre = document.createElement("h4");
    ligneTitre.style.margin = "0px";
    ligneTitre.appendChild(titreLien);
    ligneTitre.appendChild(urlLien);

    // Cette ligne contient l'auteur
    var ligneDetails = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre);
    divLien.appendChild(ligneDetails);

    return divLien;
}

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = creerElementLien(lien);
    contenu.appendChild(elementLien);
});
//---------------------------------------------------------------------------------------------------------------------------------------


var bouttonAjout = document.querySelector("#ajout");
bouttonAjout.style.margin = "15" + "px";
var formulaire = document.querySelector("#formulaire");
formulaire.style.margin = "15" + "px";
var valideFormulaire = document.querySelector("#valideForm");
formulaire.style.display = "none";


//On crée une fonction pour vider le tableau de liens et le mettre à jour
function update (){
     //on vide
    contenu.innerHTML = "";

    //On remet à jour
    listeLiens.forEach(function (lien) {
        var elementLien = creerElementLien(lien);
        contenu.appendChild(elementLien);
    });
};

//On crée une fonction qui affichera l'encart du lien ajouté 
function encart(nom) {
    var div = document.createElement("div"); //Création de la div
    div.id="afficheLien"; 
    div.textContent = nom + " a bien été ajouté"; //Texte à l'intérieur de la div
    div.style.color = "blue";
    div.style.height = "50" + "px";
    div.style.backgroundColor = "#56C9F0";
    div.style.textAlign = "left"
    div.style.padding = "25" + "px";
    document.querySelector("h1").after(div); //On place la div après le noeud <h1>
};

//On crée une fonction qui sauvegardera les données
function dataSave (lien, titre, auteur){
    localStorage.setItem("prenom", auteur);
    localStorage.setItem("lien", lien);
    localStorage.setItem("titreLien", titre);
}

//On crée un évènement qui fait disparaître le bouton "ajouter un lien"
bouttonAjout.addEventListener("click", function (){
    bouttonAjout.style.display = "none";
    formulaire.style.display = "block";
});

//On crée un évènement sur le bouton d'envoi du lien pour vérifier les données saisies et insérer le nouveau lien au tableau
valideFormulaire.addEventListener("click", function(){
    //on sélectionne les elements avant
    var titreLien = document.querySelector("#titreLien");
    var lien = document.querySelector("#lien");
    var prenom = document.querySelector("#prenom");
    var validUrl = /^(http:\/\/|https:\/\/)/; //Regex avec une url qui doit contenir soit "http://" ou "https://"
    var url = lien.value;

    if (!prenom.value) { //Si l'utilisateur n'a pas rempli le champ 
        alert("Entrez un prenom");
        return;
    }
    if (!titreLien.value) {
        alert("Entrez un titre");
        return;
    }
    if (!url) {
        alert("Entrez une url");
        return;
    } 
    else {
        if(!validUrl.test(url)) url = 'http://' + url; //Si l'url saisie ne contient pas la valeur regex, alors rajouter "http://" avant l'url
    }

    dataSave(lien.value, titreLien.value, prenom.value); //On garde les éléments en mémoire

    //On récupère les données insérées
    var name = localStorage.prenom;
    var link = localStorage.lien;
    var linkTitle = localStorage.titreLien;
     
    //On crée l'emplacement du nouveau lien
    var nouvelleItem = {};
    nouvelleItem.titre = linkTitle;
    nouvelleItem.url = link;
    nouvelleItem.auteur = name;

    //On garde les éléments en mémoire dans l'objet nouvelleItem
    localStorage.setItem("nouvelItem", nouvelleItem);
    var newItem = localStorage.getItem("nouvelItem");
    
    
    //On ajoute le lien au tableau 
    listeLiens.unshift(nouvelleItem);

    //On fais disparaître le formulaire
    formulaire.style.display = "none";
    bouttonAjout.style.display = "block";

    //On appelle la fonction pour afficher l'encart du lien ajouté
    encart(titreLien.value);

    //On appelle la fonction pour vider et mettre à jour le tableau
    update();
    
    //On ajoute une fonction setTimeout à l'encart pour qu'il ne reste que 2 secondes
    setTimeout (function(){
        document.querySelector("body").removeChild(document.querySelector("#afficheLien"));
    },2000);

    //On remet à 0 les données précédemment saisies par l'utilisateur
    prenom.value = "";
    titreLien.value = "";
    lien.value = "";
});



Configuration: Windows / Firefox 67.0
Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
26331
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 septembre 2019
1790
1
Merci
Bonjour,

A mon avis..... faudrait retirer la déclaration de ta variable listeLiens en dur... qui se trouve au début de ton code.... et la remplacer par un chargement des liens qui se trouvent dans le localstorage..
Car je ne vois pas à quel moment dans ton code tu vas parcourir les liens qui se trouvent dans le localstorage pour les afficher.....

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 59777 internautes nous ont dit merci ce mois-ci

Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
C'est vraiment pas bête et ça semble logique ! Je vais essayer ça merci :) !
Commenter la réponse de jordane45