JavaScript -从所有输入字段获取值，并将其作为新的person项添加到另一个div中

Question

好的，这是我的代码我有两个div

<div id="newPersonForm">
     <div class="formField">
         <form> 
           <div class="Nametxt smColor">
            <label for="Name">Name</label>
            <input id="Name" type="text" placeholder="Your Name"/>
        </div>
        <div class="age smColor">
            <label for="age">Last age</label>
            <input id="age" type="number"/>
        </div>
         <button>Save</button>
         </form>
     </div>
</div>
<div id="ItemsHolder">
  <div class="items">
   <items goes here>
  </div>
</div>

和一个全局数组，里面有一些数据

var defaultItems= [         
    {      
        name:"Bo",
        age:28,
        and many more objects inside properties here
    }
]

现在这里将是一个getValue()函数，其中我有变量表示来自DOM的输入

function getValue(){
  var name = document.getElementById('Name').value;
  var lastName = document.getElementById('LastName').value;

在这个函数中，我创建了另一个变量person，这将是一个对象，所以从输入值到这个person对象。

 var person = {
    name: name,
    lastName: lastName,
    defaultItems.push(person);
}

最后，我想把新的人放在defaultItems数组的末尾。

这就是我想要的。defaultItems数组将包含默认人员，具有Name, Last Name, age等属性。默认情况下，它们将在页面加载时显示。有了表单，我想注册一个新的人，它包含来自defaultItems的相同输入，也许还有一些新的。当我单击按钮上的保存并返回默认页面时，我希望表单中的那个人出现在最后一个默认项的旁边。

Answer 1

如果您不介意'people'数据仅在本地可用，那么您可以通过以下操作将用户从输入字段创建的每个person对象存储到HTML5本地存储中:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
    var person = { 'name': 'bill', 'age': '35'};
    defaultItems.push(person);
    localStorage.setItem('defaultItems', JSON.stringify(defaultItems));
} else {
    // Sorry! No Web Storage support..
}

然后，当你想要显示'people'数据的页面加载时，使用:

defaultItems = JSON.parse(localStorage.getItem('defaultItems'));

，然后遍历defaultItems数组，在DOM上显示每个人的信息。

如果你需要你的数据不仅仅是在你自己的计算机上可用，你需要将'people'数据存储到服务器数据库中，如MongoDB(或具有类似功能的东西)。

---

编辑:

用原生js填充defaultItems数组中所有人的一种可能方法:

var items = document.getElementByClass("items");
for(item in defaultItems) {
    items.innerHTML += "<div class='person'>";
    items.innerHTML += "<span>"+item.firstName+"</span>";
    items.innerHTML += "<span>"+item.lastName+"</span>";
    items.innerHTML += "<span>"+item.jobTitle+"</span>";
    items.innerHTML += "</div>";
}