如何每次使用JavaScript添加和删除带有新值的新行

我已经给了一个任务，使2个HTML页面，一个表单，其中用户输入他/她的联系信息和另一个用户的信息在一个表中查看。

我只需要使用这些语言(JavaScript, jquery, HTML, CSS,bootstrap);不使用PHP/JSP，只使用客户端语言并且不应该使用数据库。到目前为止，我已经做了这么多。

$(function()
{
   $('#form').validate(
   {
    rules:
    {
	email:
	{required:true,
	email:true
	},
	gender:
    {required:true
	},
	cont:{
	required:true,
	number:true}
	}
   
   })
});
function onsumit(){
localStorage.setItem("input0",1);
var ip=document.getElementById("name");
 localStorage.setItem("input1", ip.value);
var ip2=document.getElementById("email");
 localStorage.setItem("input2", ip2.value);
var ip3=document.getElementById("cont");
 localStorage.setItem("input3", ip3.value);
var ip4=document.getElementById("gender");
 localStorage.setItem("input4", ip4.value);
var ip5=document.getElementById("comment");
 localStorage.setItem("input5", ip5.value);  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<div class="divmid text-center" id="divmid" >
<p id="head"></p>
<a> CONTACT FORM</a>
<form class="table-responsive" id="form" name="form" action="next.html" method="get" onsubmit="onsumit()" >
<table>
  <tr>
    <td>NAME:</td>
    <td><input type="text" name="name" id="name"required>*<p id="p1"></p></td>
  </tr>
  <tr>
    <td>Contcat no:</td>
    <td><input type="text" size="10" name="cont" id="cont"required>*<p id="p2"></p></td>
 </tr>
  <tr>
    <td>EMAIL:</td>
    <td><input type="text" name="email" id="email"required>*<p id="p3"></p></td>
 </tr>
  <tr>
    <td>Gender:</td>
    <td><select id="gender" name="gender" required>
      <option value="" >SELECT</option>
	  <option value="male">MALE</option>
      <option value="female">FEMALE</option>
    </select>*<p id="p4"></p></td>
		
  </tr>
  <tr>
	<td>comments:</td>
    <td> <textarea class="form-control" rows="5" id="comment" maxlength="100"></textarea>
	</td>
  </tr>
</table>
<label><input id="submit" type="submit" value="SUBMIT"></label>
</form>
</div>

现在这是第二个HTML页面。

function load(){
    var table = document.getElementById("tab2");
    var rowCount = table.rows.length;
    var colCount = table.rows[0].cells.length;    
    var validate_Noof_columns = (colCount - 1);
    var row = table.insertRow(1);
	for(var i=0; i < colCount; i++) {  
            	
            var text = localStorage.getItem("input"+i);
            var newcell = row.insertCell(i);
                if(i == (colCount - 1)) {
    newcell.innerHTML = "<INPUT type='button' value='X' id='work' onclick='removeLine(this)'/><INPUT type='button' value='&' onclick='removeRow(this)'/>"; break;
                }  else  {
                    newcell.innerHTML = text;
                }
		}
function removeLine(lineItem) {
  var row = lineItem.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
function removeRow(onclickTAG) {
    // Iterate till we find TR tag. 
    while ( (onclickTAG = onclickTAG.parentElement)  && onclickTAG.tagName != 'TR' );
            onclickTAG.parentElement.removeChild(onclickTAG);      
}
}

body {
      font: 20px Montserrat, sans-serif;
      line-height: 1.8;
      color: black;
  }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
  .bg-1 {
      background-color: #1abc9c; /* Green */
      color: #ffffff;
  }
  .bg-2 {
      background-color: #474e5d; /* Dark Blue */
      color: #ffffff;
  }
  .bg-3 {
      background-color: #ffffff; /* White */
      color: #555555;
  }
  .bg-4 {
      background-color: #2f2f2f; /* Black Gray */
      color: #fff;
  }
  .container-fluid {
      padding-top: 70px;
      padding-bottom: 70px;
  }
  .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 12px;
      letter-spacing: 5px;
  }
  .navbar-nav  li a:hover {
      color: #1abc9c !important;
  }
  
  #divmid {
	margin:20px;
	padding:20px;
	border:3px solid red;
  }
 table{
    text-align:left ;
}
th, td {
    padding: 20px;
	text-align:left;
}
textarea{
	max-height:300px;
	resize:none;
}
#div1{
text-align:center;
	
	
}
#tab2 {
    text-align:left ;
	border:2px solid red;
	margin-left:auto;
	margin-top:40px;
	margin-bottom:200px;
}
#pick{
 
 padding:100px;
	
	}

<style>
table, td,th{
    border: 1px solid black;
}
</style>
<body onload="load()">
<div id="div1">
<span id="div2">CONTACT LIST</span>
<table id="tab2">
  <tr>
    <th>S No.</th>
    <th>NAME</th>
	<th>CONTACT</th>
    <th>EMAIL</th>
	<th>GENDER</th>
    <th>COMMENTS</th>
	<th>EDIT</th>
  </tr>
</table>
</div>
  </body>

问题是我需要在第二页创建一行，每次用户输入表单中的新值，但是在做了什么，它只创建一行，总是用新值更新它。虽然我已经使用了本地存储，但我仍然被困在这里。