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

Answer 2

您目前每次都会使用新答案覆盖密钥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来循环显示下一页的答案。 / p>

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

2 个答案: