javascript - 使用本地存储存储和显示多个答案

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 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() 会将该字符串转换回数组。