javascript - 创建循环而不是一遍又一遍地复制/粘贴代码

Question

我知道肯定有更好的方法来做到这一点，但我似乎无法弄清楚。我知道我需要创建一个循环，但仅此而已:

function loadData() {
  var getInput1 = localStorage.getItem("input1")
  var parsedInput1 = JSON.parse(getInput1)
  $("#planner-input-1").val(parsedInput1)
  //--------------------------------------

  var getInput2 = localStorage.getItem("input2")
  var parsedInput2 = JSON.parse(getInput2)
  $("#planner-input-2").val(parsedInput2)
  //--------------------------------------

  var getInput3 = localStorage.getItem("input3")
  var parsedInput3 = JSON.parse(getInput3)
  $("#planner-input-3").val(parsedInput3)
  //--------------------------------------

// etc etc etc...

Answer 1

您可以迭代索引(从 1 到任意数量)，并将其与 input 连接以在 localStorage 上查找适当的属性:

function loadData(){
  for (let i = 1; i < 10; i++) {
    const parsed = JSON.parse(localStorage.getItem("input" + i));
    $("#planner-input-" + i).val(parsed);
  }
}

但是最好重新构造你的数据和 HTML - 使用本地存储中的数组，并使用类而不是 ID，这样你就可以这样做:

function loadData(){
  const inputs = document.querySelectorAll('.planner-input');
  const parsedArr = JSON.parse(localStorage.getItem("inputs"));
  inputs.forEach((input, i) => {
    input.value = parsedArr[i];
  });
}

使用此方法，本地存储数组中的第一项将对应于要放入第一个 .planner-input 中的值，依此类推。