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

Résolu

Frank_N Messages postés 42 Date d'inscription Statut Membre Dernière intervention -
Frank_N Messages postés 42 Date d'inscription Statut Membre Dernière intervention - 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

A voir également:

Probleme avec localStorage, les données ne restent pas après rafraichissement
Fuite données maif - Guide
Supprimer les données de navigation - Guide
Trier des données excel - Guide
Comment sauvegarder toutes les données de mon téléphone - Guide
Barre de données excel pourcentage 100 ✓ - Forum Excel

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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.....

Frank_N Messages postés 42 Date d'inscription Statut Membre Dernière intervention

C'est vraiment pas bête et ça semble logique ! Je vais essayer ça merci :) !

Discussions similaires

Cette valeur ne correspond pas aux restrictions

Erreur la zone de données passée à un appel système est insu

restriction de valeur sur Excel

Excel supprimer une mise en forme de tableau

Problème de restrictions

Votre réponse

Discussions similaires