title: Store form data in Local Storage and display in table
body: <p>How to store form input data? How to get it back and take actions like update, delete and clear?</p>
  <p>Storing data using localStorage.setItem();
  Getting data using localStorage.getItem();
  I am taking user input and trying to save locally using JSON. Want to get data using JSON parse save it in table form. Want to take some actions like ADD Data, DELETE data on click. Clear the table using clear data () function. So I have related functions.<br />
  I am new. Didn't understand the logic completely.</p>
  <p><strong>HTML FORM:</strong></p>
  <pre><code>&lt;form id=&quot;form&quot;&gt;
      &lt;label for=&quot;fname&quot;&gt;First name:  
      &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot; placeholder 
       =&quot;name&quot;&gt;
      &lt;/label&gt;&lt;br&gt;
    
      &lt;label for=&quot;lname&quot;&gt;Last name:
      &lt;input type=&quot;text&quot; id=&quot;lname&quot; name=&quot;lname&quot;&gt;&lt;br&gt;
      &lt;/label&gt;&lt;br&gt;
        
      &lt;button class=&quot;btn&quot;&gt;Add&lt;/button&gt;
      &lt;button class=&quot;btn&quot;&gt;Clear List&lt;/button&gt;
  &lt;/form&gt;       
          
  &lt;table id=&quot;myTable&quot;&gt;
        &lt;tr&gt;
          &lt;th&gt;Firstname&lt;/th&gt;
          &lt;th&gt;Lastname&lt;/th&gt; 
            &lt;th&gt; Action&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tableBody id=&quot;tabledata&quot;&gt;
        &lt;tr&gt;
          &lt;td&gt;cc &lt;/td&gt;
          &lt;td&gt; qq &lt;/td&gt; 
          &lt;td&gt;&lt;button class=&quot;btn&quot;&gt;Delete&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tableBody&gt;
  &lt;/table&gt;
          
    
              
      
  </code></pre>
  <p><strong>SCRIPT:</strong></p>
  <pre><code>  let myfName = document.getElementById(&quot;fName&quot;).value; 
    let mylName = document.getElementById(&quot;lName&quot;).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(&quot;tabledata&quot;);
           let str = &quot;&quot;;
              itemJsonArray.forEach((element, index) =&gt; {
                  
         str += ` &lt;tr&gt;
          &lt;th scope=&quot;row&quot;&gt; ${index}&lt;/th&gt;
           &lt;td&gt; ${element[0]}&lt;/td&gt;
            &lt;td&gt; ${element [1]}&lt;/td&gt;
            &lt;td&gt;&lt;button  class=&quot;btn btn-warning btn-sm&quot; onclick = &quot;deleted(${index}&quot; &gt;Delete&lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;`;
              }); 
         tablebody.innerHTML = str;
              
          }
             
        let add = document.getElementById(&quot;addItem&quot;);
        add.addEventListener(&quot;click&quot;, getAndUpdate);
              
   update();    
           
  </code></pre>