Я рекомендую использовать JSON для сохранения данных формы в виде объектов в массиве.
Вы можете сериализовать данные формы, создать объект и поместить его в массив.Затем используйте JSON.stringify, чтобы преобразовать полученный массив объектов в строку JSON и сохранить его в локальном хранилище.Когда вы извлекаете данные из локального хранилища, вы можете использовать JSON.parse, чтобы преобразовать JSON обратно в массив объектов.Затем вы можете добавить данные из этих объектов в таблицу HTML.
Похоже, вы используете jQuery, поэтому я использовал это в своем примере:
//localStorage.clear();
let $form = $('#regForm');
let $table = $('#userTable');
// get and parse local storage JSON
let regData = localStorage.hasOwnProperty('regData')
? JSON.parse(localStorage.getItem('regData'))
: [];
// function to add row to table
function addTableRow(row) {
let $thisRow = $('<tr>');
$.each(row, function() {
$('<td>', {
'text': this
}).appendTo($thisRow);
});
$thisRow.appendTo($table);
}
// add rows from local storage to table
$.each(regData, function() {
addTableRow(this);
});
// add row from form to local storage and table
$('#addRow').on('click', function() {
let formData = {};
$.each($form.serializeArray(), function() {
formData[this.name] = this.value;
});
regData.push(formData);
localStorage.setItem('regData', JSON.stringify(regData));
addTableRow(formData);
$form[0].reset();
});
#userTable {
margin: 0 0 2em;
width: 100%;
text-align: left;
}
form label,
form label span {
display: block;
}
#addRow {
margin: 1em 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="userTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<form id="regForm">
<label>
<span>First Name</span>
<input type="text" name="firstName" value="">
</label>
<label>
<span>Last Name</span>
<input type="text" name="lastName" value="">
</label>
<label>
<span>Email</span>
<input type="text" name="email" value="">
</label>
<label>
<span>Phone Number</span>
<input type="text" name="phone" value="">
</label>
<button type="button" id="addRow">Add Row</button>
</form>
Просмотр демонстрации на JSFiddle
Также см. Использование локального хранилища HTML5 в качестве клиентской базы данных .