title: Dynamically creating HTML table and populating with data from localstorage
body: <p>So I've managed to store an array of objects in local storage. What I'm trying to accomplish now is retrieving the object attributes from the local storage and inserting them into their own table cells, so that they remain there as long as the data is in local storage (after a refresh or window close).</p>
  
  <p>I wish for the table to generated dynamically with the amount of rows equal to the number of objects in the array (One row 3 cells to display the data). </p>
  
  <p>This is what I've come up with so far; I can see the array of objects and the object's attributes in the local storage, but have had no luck on it still being displayed after a page reload. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var courseArray = [];
  window.onload = init;
  
  function addCourse() {
    var course = {
      name: document.getElementById("courseName").value,
      number: document.getElementById("courseNumber").value,
      room: document.getElementById("room").value
    };
    courseArray = JSON.parse(localStorage.getItem("course")) || [];
  
    courseArray.push(course);
    localStorage.setItem("course", JSON.stringify(courseArray));
    courseArray = localStorage.getItem("course");
    courseArray = JSON.parse(courseArray);
    
    var row = enrolled.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
  
    for (i = 0; i &lt;= courseArray.length; i++) {
      cell1.innerHTML = courseArray[i].name;
      cell2.innerHTML = courseArray[i].number;
      cell3.innerHTML = courseArray[i].room;
    }
  }
  
  function clearData() {
    localStorage.clear();
  }
  
  function createSchedule(course) {
    var table = getElementById("enrolled");
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    var cell2 = document.createElement("td");
    var cell3 = document.createElement("td");
    cell1.innerHTML = course.name;
    cell2.innerHTML = course.number;
    cell3.innerHTML = course.room;
  }
  
  function getCourseArray() {
    var courseArray = localStorage.getItem("course");
    return courseArray;
  }
  
  function init() {
    var courseArray = getCourseArray();
    for (i = 0; i &lt; courseArray.length; i++) {
      var course = courseArray[i];
      createSchedule(course);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link type="text/css" rel="stylesheet" href="StudentStyle.css"&gt;
    &lt;title&gt;Student Page&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
      src = "registerBox.js"
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="all"&gt;
      &lt;div class="welcome"&gt;
        &lt;h1 class="title" align="center"&gt;Student Page&lt;/h1&gt;
        &lt;h2 align="center"&gt;Class Schedule&lt;/h2&gt;
      &lt;/div&gt;
      &lt;table id="enrolled" align="center"&gt;
        &lt;tr id="titleRow"&gt;
          &lt;th&gt;Course&lt;/th&gt;
          &lt;th&gt;Course Number&lt;/th&gt;
          &lt;th&gt;Room&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div id="registerBox"&gt;
        &lt;button onclick="addCourse()"&gt;Register&lt;/button&gt;
        &lt;button onclick="clearData()"&gt;Clear Data&lt;/button&gt;
        &lt;input type="text" id="courseName" placeholder=" Course Name"&gt;
        &lt;input type="text" id="courseNumber" placeholder="Course Number"&gt;
        &lt;input type="text" id="room" placeholder="Room"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>