title: How to display array from local storage in html element?
body: <p>Obviously, a beginner's question:</p>
  
  <p><strong>How do I get array data to display in an html element using html and javascript</strong>? </p>
  
  <p>I'd like to display the user saved array data in a paragraph tag, list tag, or table tag, etc. </p>
  
  <p>[<a href="http://www.mysamplecode.com/2012/04/html5-local-storage-session-tutorial.html]" rel="nofollow">http://www.mysamplecode.com/2012/04/html5-local-storage-session-tutorial.html]</a></p>
  
  <p>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. </p>
  
  <p>Below is the code snip that demonstrates what I'm trying to do.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; myArrayObject.length; i++) {
      var personObject = myArrayObject[i];
      console.log("Name: " + personObject.name, "Age: " + personObject.age);
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="name"&gt;Name:&lt;/label&gt;
  &lt;input type="text" data-clear-btn="true" name="name" id="name" value=""&gt;
  &lt;label for="age"&gt;Age:&lt;/label&gt;
  &lt;input type="text" data-clear-btn="true" name="age" id="age" value=""&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input type="button" id="sArray" value="Save Array data" onclick="Javascript:saveArrayData()"&gt;
  
  &lt;input type="button" id="rArray" value="Restore Array data" onclick="Javascript:restoreArrayData()"&gt;
  
  &lt;p id="displayArrayDataHere"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>