Frank_N
Messages postés42Date d'inscriptiondimanche 3 juin 2018StatutMembreDernière intervention 8 août 2019
-
17 juin 2019 à 15:31
Frank_N
Messages postés42Date d'inscriptiondimanche 3 juin 2018StatutMembreDerniè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>
/*
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
A voir également:
Probleme avec localStorage, les données ne restent pas après rafraichissement
jordane45
Messages postés38314Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention24 novembre 20244 705 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.....
Frank_N
Messages postés42Date d'inscriptiondimanche 3 juin 2018StatutMembreDerniè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 :) !
17 juin 2019 à 16:06