Сохранение данных формы в локальном хранилище и отображение в таблице

Question

Как сохранить данные ввода формы? Как вернуть его и выполнить такие действия, как обновление, удаление и очистка?

Сохранение данных с помощью localStorage.setItem (); Получение данных с помощью localStorage.getItem (); Я беру пользовательский ввод и пытаюсь сохранить локально, используя JSON. Хотите получить данные, используя синтаксический анализ JSON, сохраните их в виде таблицы. Хотите выполнить некоторые действия, такие как ДОБАВЛЕНИЕ данных, УДАЛЕНИЕ данных при нажатии. Очистите таблицу с помощью функции clear data (). Так что у меня есть связанные функции. Я новичок. Не понял лог c полностью.

HTML ФОРМА:

<form id="form">
    <label for="fname">First name:  
    <input type="text" id="fname" name="fname" placeholder 
     ="name">
    </label><br>
  
    <label for="lname">Last name:
    <input type="text" id="lname" name="lname"><br>
    </label><br>
      
    <button class="btn">Add</button>
    <button class="btn">Clear List</button>
</form>       
        
<table id="myTable">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
          <th> Action</th>
      </tr>
      <tableBody id="tabledata">
      <tr>
        <td>cc </td>
        <td> qq </td> 
        <td><button class="btn">Delete</button></td>
      </tr>
    </tableBody>
</table>
        
  
            
    

СКРИПТ:

  let myfName = document.getElementById("fName").value; 
  let mylName = document.getElementById("lName").value;  
         
       if(localStorage.getItem('itemJson') == null){
                itemJsonArray =[];
                itemJsonArray
                .push([ myfName, mylName]);
                localStorage.setItem('itemJeson', 
               JSON.stringify(itemJsonArray))
                }
            else{
                itemJsonArrayStr 
              localStorage.getItem('itemJeson');
                itemJsonArry = JSON.parse(  
              itemJsonArrayStr);
                
               itemJsonArray
                .push([ myfName, mylName]);
                localStorage.setItem('itemJeson', 
               JSON.stringify(itemJsonArray))
              }
         
update();
      // updating inputs in table   
     function update(){ 
         if(localStorage.getItem('itemJson') == null){
             itemJsonArray =[];
             localStorage.setItem('itemJeson', 
             JSON.stringify(itemJsonArray))
            }
            else{
                itemJsonArrayStr = 
                localStorage.getItem('itemJeson');
                itemJsonArry = JSON.parse(  
                itemJsonArrayStr);
               }
         let tableData document.getElementById("tabledata");
         let str = "";
            itemJsonArray.forEach((element, index) => {
                
       str += ` <tr>
        <th scope="row"> ${index}</th>
         <td> ${element[0]}</td>
          <td> ${element [1]}</td>
          <td><button  class="btn btn-warning btn-sm" onclick = "deleted(${index}" >Delete</button></td>
                    </tr>`;
            }); 
       tablebody.innerHTML = str;
            
        }
           
      let add = document.getElementById("addItem");
      add.addEventListener("click", getAndUpdate);
            
 update();