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

Obviously, a beginner's question:

显然,初学者的问题是:

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

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

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.

以上是localStorage提供的实例示例的链接,除了如何在html页面而不是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>

1 个解决方案

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