Sujet Précédent Sujet Suivant

Probleme avec localStorage, les données ne restent pas après rafraichissement

Résolu/Fermé
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 à 15:31
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

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
17 juin 2019 à 15:46
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.....

1
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
C'est vraiment pas bête et ça semble logique ! Je vais essayer ça merci :) !
0

Discussions similaires

Reporter valeur sur autre feuille avec critere
Otk168 -
via55 -

4 réponses
Germain
germai -
Dexterccm -

1 réponse
Nettoyer une base de données avec une liste
TOT127 -
TOT127 -

11 réponses
Impossible d'activer les données cellulaires !
capucinernv -
6splus -

6 réponses
Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses