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

Question

Obviously, a beginner's question:

How do I get array data to display in an html element using html and javascript ?

I'd like to display the user saved array data in a paragraph tag, list tag, or table tag, etc.

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

Above is a link to the kindly provided example of localStorage except how to display the array on the html page rather than in the console.log.

Below is the code snip that demonstrates what I'm trying to do.

 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

You should update your code like below:

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>");
}