javascript - javascript 中的 for 循环和 localstorage 问题

Question

我有这段代码，它可以正常工作，但唯一的问题是它没有像我真正想要的那样为我保存本地存储。循环保留所有键，但具有相同的最后一个值:

"use strict";

var form = document.querySelector("#form");

form.addEventListener("submit", function() {
  var name = document.querySelector("#name").value;
  var year = document.querySelector("#year").value;
  var productor = document.querySelector("#productor").value;
  var director = document.querySelector("#director").value;

  if (name === "" || year == "" || productor == "" || director == "") {
  } else {
    let body = document.querySelector("tbody");
    var tr = document.createElement("tr");
    body.appendChild(tr);

    var datos = [name, year, productor, director];
    var keys = ["name", "year", "productor", "director"];
    for (var k in keys) {
      for (var d in datos) {
        localStorage.setItem(keys[k], datos[d]);
      }
    }


    for (let d in datos) {
      var td = document.createElement("td");
      tr.appendChild(td);
      var text = document.createTextNode(datos[d]);
      td.appendChild(text);
    }
  }
});

var clear = document.querySelector("#clear");

我想问题就在这里:

for (var k in keys) {
      for (var d in datos) {
        localStorage.setItem(keys[k], datos[d]);
      }
    }

Answer 1

正如我在评论中指出的那样，您将在内部循环的每次迭代中覆盖每个键的值(并将它们全部设置为 datos 数组中的最后一个值)。我认为您希望将 keys 数组中的每个键设置为与 datos 数组中同一索引处的项目相对应的值。例如:

const datos = ['Working Title', '2018', 'Patty Producer', 'Danny  Director'];
const keys = ['name', 'year', 'productor', 'director'];
keys.forEach((k, i) => {
  localStorage.setItem(k, datos[i]);
});
    
console.log(localStorage.getItem('name')); // Working Title