javascript for loop for json variables in localStorage 仅显示 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';
  };
};

javascript for loop for json variables in localStorage 仅显示 wtform 中的最后一项

javascript for loop for json variables in localStorage only displays last item in wtform

javascript

for-loop

local-storage

wtforms