El nombre y el apellido se colocan en el objeto y el objeto se coloca en la matriz. LocalStorage guarda esta matriz. Después del formulario, deje que la tabla contenga la información de la matriz de almacenamiento local.
const jsonForm = document.querySelector('.json'), jsonInput = document.querySelector('.json-input'), jsonOutPut = document.querySelector('.json-table'), tdFirstname = jsonOutPut.querySelector('.first-name'), tdSecondName = jsonOutPut.querySelector('.second-name'), namesArr = []; jsonForm.addEventListener('submit', (e) => { e.preventDefault(); const splitted = jsonInput.value.split(' '); let nameInput = splitted[0].charAt(0).toUpperCase() + splitted[0].slice(1); let surnameInput = splitted[1].charAt(0).toUpperCase() + splitted[1].slice(1); namesArr.sort(); namesArr.push(nameInput); namesArr.push(surnameInput); console.log(namesArr); tdFirstname.append(namesArr[0]); tdSecondName.append(namesArr[1]); }); <form class="json"> <input type="text" class="json-input"> <button type="submit">Enter Your FullName</button> </form> <br><br> <table class="json-table"> <tr> <th>Name</th> <th>Surname</th> </tr> <tr> <td class="first-name"></td> <td class="second-name"></td> </tr> </table>El contenido siempre se vuelve a escribir en los mismos nodos existentes, en lugar de crear nuevos nodos por entrada. Algo como esto debería funcionar ( Codepen ):
<form class="json"> <input class="json-input"> <button type="submit">Enter Your FullName</button> </form> <table class="json-table"> <thead> <tr> <th>Name</th> <th>Surname</th> </tr> </thead> <tbody class="json-data"></tbody> </table> const addRowToTable = (str) => { const splitted = str.split(' '); const tr = document.createElement('tr'); const td1 = document.createElement('td'); const td2 = td1.cloneNode(); td1.innerText = splitted[0].charAt(0).toUpperCase() + splitted[0].slice(1); tr.appendChild(td1); if (splitted.length === 2) { td2.innerText = splitted[1].charAt(0).toUpperCase() + splitted[1].slice(1); } tr.appendChild(td2); document.querySelector('.json-data').appendChild(tr); } const form = document.querySelector('.json'); form.addEventListener('submit', (e) => { e.preventDefault(); addRowToTable(document.querySelector('.json-input').value); // save `document.querySelector('.json-input').value` to local storage form.reset(); }); // read local storage and use `addRowToTable` function to add existing entries to the table