Forum : Problème LocalStorage et affichage Valeur variable

Bonjour,

Je suis en train d'essayer de créer un petit forum pour mon site et je me heurte à plusieurs soucis.

Le problème est que je permet à l'utilisateur de créer une question en rentrant son pseudo et le texte de sa question. Puis je me permet à un utilisateur de répondre à cette question.

Mon problème est que je n'arrive pas à afficher toutes les réponses, la dernière réponse remplace la précédente.

Je pense que cela vient de mon tableau ou que je dois faire une boucle mais je ne sais pas trop comment faire ?

De plus, je voudrais faire en sorte (une fois qu'il y a possibilité de répondre infiniment à une question) que 5 réponse s'affiche par "page" et qu'ensuite une pagination intervienne et je ne sais pas du tout vers quoi me tourner ?

Voici le JS que j'ai fait en espérant avoir assez bien expliqué mon problème.

$(document).ready(function(){
    $("#add").click(function(){

        var content = $("#forum").html();
        var pseudos = localStorage.getItem("pseudos");
        var questions = localStorage.getItem("questions");
        var reponses = localStorage.getItem("reponses");

        if (pseudos == null) {
            var pseudos = [];
            var questions = [];
            var reponses = [];
            pseudos.push($("#pseudo").val());
            questions.push($("#question").val());
            reponses.push(null);
        }
        else {
            pseudos = JSON.parse(pseudos);
            pseudos.push($("#pseudo").val());
            questions = JSON.parse(questions);
            questions.push($("#question").val());
            reponses = JSON.parse(reponses);
            reponses.push($("#reponses").val());
        }

        localStorage.setItem("pseudos", JSON.stringify(pseudos));  
        localStorage.setItem("questions", JSON.stringify(questions));
        localStorage.setItem("reponses", JSON.stringify(reponses));
        affichage_questions();
        location.reload();
    });

    $('.scroll').on('click', function() {
        var page = $(this).attr('href');
        var speed = 750;
        $('html, body').animate({
            scrollTop: $(page).offset().top
        }, speed);
        return false;
    });
});

function affichage_questions() {

     var pseudos = localStorage.getItem("pseudos");
     var questions = localStorage.getItem("questions");
     var reponses = localStorage.getItem("reponses");
     var array_pseudo = JSON.parse(pseudos);
     var array_question = JSON.parse(questions);
     var array_reponse = JSON.parse(reponses);

    for (var i in array_pseudo) {
        var pseudo = array_pseudo[i];
        var question = array_question[i];
        var reponse = array_reponse[i];

        if (reponse == null) {
            var texte = "<div id='posts'><span id= '" + i + "'> Question posee par : " + pseudo + "<br/> " + question + " <br/> Postez votre reponse ici :<br/> <textarea id='reponse_"+ i + "' placeholder='Rédiger votre réponse ici.'></textarea> <br/> <button onclick='reponse("+ i +")'>Repondre</button></span> </div><br/><br/>";
        } else {
            var texte = "<div id='posts'><span id= '" + i + "'> Question posee par : " + pseudo + "<br/> " + question + " <br/> La reponse apportee est : " + reponse + "</span> </div><br/><br/>";
        }
        document.getElementById("forum").innerHTML += texte;
    }  
}

function reponse(id) {

    var texte = document.getElementById("reponse_"+id).value;
    var reponses = localStorage.getItem("reponses");
    var array_reponse = JSON.parse(reponses);
    array_reponse[id] = texte;
    localStorage.setItem("reponses", JSON.stringify(array_reponse));
    location.reload();
}

celionor

Réponse acceptée

Tu prends une liste, si elle n'existe pas, tu la créés, sinon, tu l'ajoutes

var responses;
function init() {
    // Ta requête qui te renvoit ton json (pseudo, questions, ect...)
    var request = app.get('/');

    // Liste de tes responses
    // ex : {"responses":["premiere response","seconde response"]}
    responses = request.responses;
    // si aucune réponse, on créé un tableau vide
    if (typeof(responses) === undefined) {
        responses = [];
    }
}

function AjouterReponse(id) {
  var nouvelleReponse = document.getElementById('reponse_'+ id).value;
  responses.push(nouvelleReponse);
}

Voir doc :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push

Lartak

Bonjour.
Je crois bien que tu t'emmèles les pinceaux là.
As-tu bien compris à quoi sert le local storage ?
Quand tu sauvegardes des données dans le local storage, c'est sur l'ordinateur de l'utilisateur, par conséquent, ce que tu sauvegardes dans le local storage, ne peut être utilisé que pour l'utilisateur actuel.
Ensuite, sauvegarder autant de données dans le local storage de l'utilisateur, c'est de l'usage abusif de ta part.
D'après ce que je vois, tu greffes un event click sur l'élémnt qui à l'ID add, mais si c'est un lien ou un formulaire, vu que tu n'empèches pas le comportement par défaut du navigateur, tu auras un rechargement de la page, sans pouvoir faire exécuter le code qui se trouve dans la fonction.

Problème LocalStorage et affichage Valeur variable

2 réponses