title: How to keep the html table unchanged after refreshing the page
body: <p>I have created a web page containing two text boxes to get user inputs, and a button to add those values to an html table as a new row. I have used JavaScript to do this function. Here is my code:</p>
  <p><strong>JavaScript code</strong></p>
  <pre><code>function addData(tableID)
  {   
              var t = document.getElementById(&quot;timeslot&quot;).value;
              var m = document.getElementById(&quot;mon&quot;).value;
          
              var table = document.getElementById(tableID);
           
              var rowCount = table.rows.length;
              var row = table.insertRow(rowCount);
          
              var cell1 = row.insertCell(0);
              var element1 = document.createTextNode(t);
              element1.type = &quot;label&quot;;
              cell1.appendChild(element1);
          
              var cell2 = row.insertCell(1);
              var element2 = document.createTextNode(m);
              element2.type = &quot;label&quot;;
              cell2.appendChild(element2);
  }
  </code></pre>
  <p><strong>HTML code</strong></p>
  <pre><code>    &lt;input type='button' name='Add' value='Add' style='width:130px;padding:10px;' onclick=&quot;addData('timetable')&quot;&gt;
  </code></pre>
  <p>This code functions correctly.
  But when I refresh the page, the newly added rows are disappearing and my page becomes as it was, before I insert new rows. How do I avoid this and keep my table without changing the newly added fields?</p>