Estoy creando una aplicación de seguimiento de gastos que guarda los datos ingresados en un formulario, luego los registra en una tabla debajo de las entradas (Nombre, Fecha y Cantidad), luego guarda esos datos en el almacenamiento local del navegador como una matriz. Estoy tratando de recuperar los datos de la tabla tal como se registraron en la tabla (en las filas y columnas correctas) cuando se vuelve a cargar la página.

 //FUNCTION TO GET EXISTING EXPENSES FROM LOCAL STORAGE WHEN PAGE IS REFRESHED (display Table on the screen with refreshing Page) function getExpenses(expenses) { //CHECK If an expense exists in Local Storage //Checks if expense exists if (localStorage.getItem("expenses") === null) { expenses = []; //create a new array for expenses if none exists } else { expenses = JSON.parse(localStorage.getItem("expenses")); //Gets back the array of existing expenses if expenses exist } expenses.forEach((item) => { //create <tr></tr> const tableRow = document.createElement("tr"); //new table row tableRow.classList.add("table-row"); //set class to t-row tableHead.appendChild(tableRow); //Append new row(.tableHead) to the table in HTML //create <td></td> const tableDataA = document.createElement("td"); //New Table Data Element tableDataA.innerText = item; tableRow.appendChild(tableDataA); const tableDataB = document.createElement("td"); tableDataB.innerText = item; tableRow.appendChild(tableDataB); const tableDataC = document.createElement("td"); tableDataC.innerText = item; tableRow.appendChild(tableDataC); //APPEND expenseTable.appendChild(tableRow); //To Append .t-row to the Table element in our HTML file }); }