localStorage.getItem does not update the rows deleted in javascript. What can i do to enable this.

when I refresh the page. I see the last data entered but when i delete a row. the deleted row is not is not stored

    enter code here

// const formEl = document.querySelector("form");
// const tbodyEl = document.querySelector("tbody");
// const tableEl = document.querySelector("table");
// localStorage.clear()

function onAddWebsite(e) {
  e.preventDefault();
  const website = document.getElementById("website").value;
  const url = document.getElementById("url").value;
  let data = document.querySelector("tbody").innerHTML += `
      <tr>
          <td>${url}</td>
          <td>${website}</td>
          <td><button class="deleteBtn">Delete</button></td>
      </tr>
  `;
  localStorage.setItem('data', data)
}

function onDeleteRow(e) {
  if (!e.target.classList.contains("deleteBtn")) {
    return;
  }

  const btn = e.target;
  btn.closest("tr").remove();

}

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('tbody').innerHTML = localStorage.getItem('data');
  document.querySelector('button').onclick = onAddWebsite;
  document.querySelector('table').onclick = onDeleteRow;
});