将对象数组存储在本地存储中，并使用 HTML 动态显示它们

Question

我有一个表单，用户将在其中输入他们的联系方式。

然后，他们可以选择提交表单或按添加其他人。

如果他们选择添加另一个人，则表单中的数据将传递到本地存储中。

从那里，用户可以根据需要输入尽可能多的人的详细信息，所有数据存储在本地。

然后，我需要能够在表单上方显示存储的数据，以便他们可以看到他们已经添加的内容。

这是我拥有的显示数据的地方

<div class="guestTable" id="guestview"></div>

这就是将其传递到动态HTML中以显示的内容。

<script>
let guests_deserialized = JSON.parse(localStorage.getItem("guests"));
let html = "<div>"; // Build the div output
var i;
for (i = 0; i < guests_deserialized.length; i++) {
html += `<div id='guests${i}'>`; // If you add a button to remove a guest you can use the counter similarly to determine which element you want to delete.
html += guests_deserialized[i].firstName + "<br>";
html += guests_deserialized[i].lastName + "<br>";
/* html += guests_deserialized[i].email + "<br>";
html += guests_deserialized[i].mobileNumber + "<br><br>"; */
html += "</div>";
}
html += "</html>";
localStorage.setItem("guestshtml", html);
}); /* resets the form */
/* document.querySelector('form').reset(); */
</script>
<script>
let guests_html = localStorage.getItem("guestshtml"); // Display the guests data
document.getElementById("guestview").innerHTML = guests_html;
</script>

目前输出是这样的

f名称

l名称

我想在这样的表格中显示数据

Guest 1 fName lName (删除(

我已经在这里搜索了，谷歌和YouTube寻求帮助，但我是空的。谁能帮忙？

Answer 1

我在jsFiddle上写了一个快速示例：点击这里

.HTML：

<form onsubmit="addEntry(event)" >
<input type="text" name="fname" id="fname"/>
<input type="text" name= "lname" id="lname"/>
<button>
Add
</button>
</form>
<div class="guestTable" id="guestview"></div>

.JS：

addEntry = (e) => {
e.preventDefault()
let entries = []
let fname =  document.getElementById("fname").value
let lname =  document.getElementById("lname").value
if(localStorage.getItem('guests')){
entries = JSON.parse(localStorage.getItem('guests')) 
entries.push({fname,lname})
localStorage.setItem('guests',JSON.stringify(entries))
}else{
entries.push({fname,lname})
localStorage.setItem('guests',JSON.stringify([{fname,lname}]))
}
let html =''
for(i=0;i<entries.length;i++){
html += '<div>'+entries[i].fname+' '+entries[i].lname+'</div>'
}
document.getElementById("guestview").innerHTML= html
}