如何在html元素中显示本地存储中的数组？

Question

显然，一个初学者的问题是：

如何使用html和javascript使数组数据显示在html元素中 ？

我想在段落标签，列表标签或表格标签等中显示用户保存的数组数据。

[ http://www.mysamplecode.com/2012/04/html5-local-storage-session-tutorial.html]

除了如何在html页面而不是console.log中显示数组之外，以上是指向localStorage示例的链接。

下面是演示我正在尝试执行的代码片段。

 function saveArrayData() { console.log("Saving array data to local storage."); var myArrayObject = []; var personObject1 = new Object(); personObject1.name = "Array1"; personObject1.age = 23; myArrayObject.push(personObject1); var personObject2 = new Object(); personObject2.name = "Array2"; personObject2.age = 24; myArrayObject.push(personObject2); var personObject3 = new Object(); personObject3.name = "Array3"; personObject3.age = 25; myArrayObject.push(personObject3); localStorage.setItem("persons", JSON.stringify(myArrayObject)); } function restoreArrayData() { console.log("Restoring array data from local storage."); var myArrayObject = JSON.parse(localStorage.getItem("persons")); for (var i = 0; i < myArrayObject.length; i++) { var personObject = myArrayObject[i]; console.log("Name: " + personObject.name, "Age: " + personObject.age); } } 

 <label for="name">Name:</label> <input type="text" data-clear-btn="true" name="name" id="name" value=""> <label for="age">Age:</label> <input type="text" data-clear-btn="true" name="age" id="age" value=""> <br> <br> <input type="button" id="sArray" value="Save Array data" onclick="Javascript:saveArrayData()"> <input type="button" id="rArray" value="Restore Array data" onclick="Javascript:restoreArrayData()"> <p id="displayArrayDataHere"></p> 

Answer 1

您应该像下面那样更新代码：

function restoreArrayData() {
    var myArrayObject = JSON.parse(localStorage.getItem("persons"));
    $("#displayArrayDataHere").append("<table>");
    myArrayObject.forEach(function(personObject) {
        $("#displayArrayDataHere").append("<tr><td>"+personObject.name+"</td><td>"+personObject.age+"</td></tr>")
    })
    $("#displayArrayDataHere").append("</table>");
}