Использование локального хранилища для хранения и отображения нескольких ответов

Question

Я работаю на веб-странице, где я пытаюсь отобразить вопрос, и у зрителей есть ответ, который появляется на другой странице. В настоящее время на странице ответов отображается только самый последний ответ. Я не уверен, как написать свою функцию, чтобы она хранила и отображает все ответы. (Я новичок в javascript) Спасибо!

<div id=q2 class="question gr"> 
     What is good design? 
    <input id="q2input" type="text" > 

    <div class="buttons"> <button onclick="functionTwo()"   
    class="sbuttons">Submit</button> 

       <!-- View Answers Button --> 
    <button id="ViewAnswers2" class="vabuttons" >View Answers</button>  
    <script type="text/javascript"> 
    document.getElementById("ViewAnswers2").onclick = function() { 
    location.href = "WhatIsGoodDesign.html"; 
    }; 
    </script> 
     </div> 

    <script> 
    function functionTwo(){ 
     var input = document.getElementById("q2input").value; 
     console.log(input); 
     localStorage.setItem("question2", input); 
     window.location.href = "WhatIsGoodDesign.html"; 
    } 
    </script> 

Answer 1

Вы в настоящее время переписываете ключ question2 с новым ответом каждый раз. Если вам нужен список последних ответов. Вы должны сделать что-то вдоль линий:

function functionTwo(){ 
    var input = document.getElementById("q2input").value; 
    var numAnswers = localStorage.getItem("question2numAnswers") || 0; 
    localStorage.setItem("question2answer" + numAnswers.toString(), input); 
    localStorage.setItem("question2numAnswers", numAnswers + 1); 
    window.location.href = "WhatIsGoodDesign.html"; 
} 

Таким образом, вы следить за количеством ответов с question2numAnswers и каждый ответ с question2answer# и вы можете петлю через ответы на следующей странице, перейдя от 0 на question2numAnswers, который вы храните.

Answer 2

Используйте вместо этого массив. В настоящее время все, что вы делаете, перезаписывает текущее значение в слоте ответов question2 каждый раз. Массивы способа хранить несколько значений данных в одной переменной

function functionTwo() { 
    var input = document.getElementById("q2input").value; 
    var answers = JSON.parse(localStorage.getItem("question2answers")) || []; 
    //Not too sure about the || []; 
    answers.push(input); 
    localStorage.setItem("question2answers", JSON.stringify(answers)); 
    window.location.href = "WhatIsGoodDesign.html"; 
} 

Вы не можете напрямую положить массив в LocalStorage, так что вы должны передать его в и в качестве объекта JSON. JSON.stringify() превратит его в строку, которую вы можете передать в LocalStorage, в то время как JSON.parse() переведет эту строку обратно в массив.