javascript - localStorage 中 json 变量的 javascript for 循环仅显示 wtform 中的最后一项

Question

我正在尝试使用存储在 localStorage 中的 json 数组中的项目填充 wtform textareafield。每行应该有 1 个值，如下所示：

价值1

价值2

价值3

当我使用 for 循环获取项目时，仅显示最后一项。

价值3

任何帮助将不胜感激。

 function getValue() {
    //sets requirements as a json array
      var myinputs = $("[id^=reqInput]").map(function(){
       return this.value;
        }).get();
        localStorage.setItem("reqs", JSON.stringify(myinputs));
        console.log(myinputs);
    // calls arrays and populates criteria form
        for (var i = 0; i < myinputs.length; i++) {
          var reqArray = myinputs[i];
          console.log(reqArray);
          document.getElementById("mission").value = reqArray;
      };
    };

Answer 1

从您的代码中，以下语句将始终在每个循环中用新值替换以前的值：

document.getElementById("mission").value = reqArray;

如果您希望将每个值打印在单独的行中，则需要将值附加到#mission（而不是替换它）上，并放在<br />两者之间。

例子：

// empty the element at first
document.getElementById("mission").innerHTML = ""

for (var i = 0; i < myinputs.length; i++) {
    var reqArray = myinputs[i];
    document.getElementById("mission").innerHTML += reqArray + "<br />";
};

Answer 2

我根据 Noval Agung Prayogo 的反馈做了以下调整，效果很好！

function getValue() {
//sets requirements as a json array
  var myinputs = $("[id^=reqInput]").map(function(){
   return this.value;
    }).get();
    sessionStorage.setItem("reqs", JSON.stringify(myinputs));
    console.log(myinputs);
    document.getElementById("mission").value = ""
    for (var i = 0; i < myinputs.length; i++) {
    var reqArray = myinputs[i];
    document.getElementById("mission").value += reqArray + '\n';
  };
};