save file and local dowload

Question

Good day everyone. I want to create a file and be able to download it after the file has been saved/updated without the need for a backend like php or sql only my local storage data. This is my code and I am able to download the initial file but I can't seem to get the updated and saved file. Hope someone can help me. Should I abandon this and just simply go to PHP or SQL? I would very much appreciate help. Thank you

function savePerson() {
  var person = {
    dateOfConsult: document.getElementById('date').innerHTML,
    name: document.getElementById('txtname').innerHTML
  };
}
savePerson()

function downloadCSV(csv, filename) {
  var csvfile;
  var downloadLink;

  csvfile = new Blob([csv], {
    type: "text/csv"
  });
  downloadLink = document.createElement("a");
  downloadLink.download = filename;
  downloadLink.href = window.URL.createObjectURL(csvfile);
  downloadlink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click()
}

function exportTable to csv(filename) {
    var csv = []
    var rows = document.querySelectorAll("table tr");
    for (var i = 0; i < rows.length; i++) {
      var row = [],
        cols = rows[i].querySelectorAll("td, tr");
      for (var j = 0; j < cols.length; j++)
        row.push(cols[j].innerText);
      csv.push(row.join(","));
    }

    downloadCSV(csv.join("\n"), filename);

<h3>Profile</h3>
<form action="#" name="Profile" onsubmit="savePerson()">
  <table align="center">
    <tr>
      <td>Date of</td>
      <td><input type="text" id="date" size="30"></td>
    </tr>
    <tr>
      <td>Name</td>
      <td><input type="textname" name="name" id="textname" size="30"></td>
    </tr>