title: How to save the data in local storage?
body: <p>I want to use the local storage option where the data is displayed on the screen even when the page is refreshed.
  As in when a row gets added using the addRow(), then i refresh the page, i need to see the table with the added Row data as well.</p>
  
  <p>I want to use javascript as i am new to javascript i need a bit of help. i was able to do the edit and delete option on my own. But i need help in using local storage.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    let addRow = () =&gt; {
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let email = document.getElementById("email").value;
        let contact = document.getElementById("number").value;
          
        if(name === ""){
          alert('Please Fill Your Full Name');
          document.getElementById("name").focus();
          return false;
        }
        if(age === ""){
          alert('Please Fill Your Age');
          document.getElementById("age").focus();
          return false;
        }
        if(email === ""){
          alert('Please Fill Your Email');
          document.getElementById("email").focus();
          return false;
        }
        if(contact === ""){
          alert('Please Fill Your Mobile Number');
          document.getElementById("number").focus();
          return false;
        }
          
        let tr=document.createElement('tr');
        tr.innerHTML=`
        &lt;td&gt;${name}&lt;/td&gt;
        &lt;td&gt;${age}&lt;/td&gt;
        &lt;td&gt;${email}&lt;/td&gt;
        &lt;td&gt;${contact}&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" class="btn btn-warning" id="editBtn"&gt; Edit &lt;/button&gt;
          &lt;button type="button" class="btn btn-danger" id="deleteBtn"&gt; Delete &lt;/button&gt;
        &lt;/td&gt;`
          
        document.getElementById("tableDisplay").appendChild(tr);
        document.getElementById("name").value = '';
        document.getElementById("age").value = '';
        document.getElementById("email").value = '';
        document.getElementById("number").value = '';
        document.getElementById("tableDisplay").value = '';
      };
      document.getElementById("tableDisplay").addEventListener("click", (event) =&gt; {
        if (event.target.matches("#deleteBtn")) {
          let row = event.target.closest("tr");
          row.remove();
        }
      });
  
  document.getElementById("tableDisplay").addEventListener("click", (event) =&gt; {
    if (event.target.matches("#editBtn")) {
      let row = event.target.closest("tr");
      row.setAttribute("contenteditable", "true");
      alert("Click on the text you want to edit!");
      row.cells[4].innerHTML = `&lt;button type="button" class="btn btn-primary" id="saveBtn"&gt; Save &lt;/button&gt;`;
    }
  });
  
  document.getElementById("tableDisplay").addEventListener("click", (event) =&gt; {
    if (event.target.matches("#saveBtn")) {
      let row = event.target.closest("tr");
      row.setAttribute("contenteditable", "false");
      alert("Row data changed!");
      row.cells[4].innerHTML = `
        &lt;button type="button" class="btn btn-warning" id="editBtn"&gt; Edit &lt;/button&gt;
        &lt;button type="button" class="btn btn-danger" id="deleteBtn"&gt; Delete &lt;/button&gt;`;
    }
  });
          
      document.getElementById("done").addEventListener("click", addRow);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
      &lt;div class="border border-dark rounded p-1 bg-light"&gt;
        &lt;table class="text-center table" align="center" id="tableDisplay"&gt;
            &lt;tr class="bg-warning"&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Contact Number&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;John&lt;/td&gt;
              &lt;td&gt;26&lt;/td&gt;
              &lt;td&gt;foresto@worksmail.tk&lt;/td&gt;
              &lt;td&gt;+917007984498&lt;/td&gt;
              &lt;td&gt;
                &lt;button type="button" class="btn btn-warning" id="editBtn"&gt; Edit &lt;/button&gt;
                &lt;button type="button" class="btn btn-danger" id="deleteBtn"&gt; Delete&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Jimmy&lt;/td&gt;
              &lt;td&gt;45&lt;/td&gt;
              &lt;td&gt;foresto@official-sunveno.ru&lt;/td&gt;
              &lt;td&gt;+917007985598&lt;/td&gt;
              &lt;td&gt;
                &lt;button type="button" class="btn btn-warning" id="editBtn"&gt; Edit &lt;/button&gt;
                &lt;button type="button" class="btn btn-danger" id="deleteBtn"&gt; Delete&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Sarah&lt;/td&gt;
              &lt;td&gt;32&lt;/td&gt;
              &lt;td&gt;foresto@abac-compressoren.ru&lt;/td&gt;
              &lt;td&gt;+917897984498&lt;/td&gt;
              &lt;td&gt;
                &lt;button type="button" class="btn btn-warning" id="editBtn"&gt; Edit &lt;/button&gt;
                &lt;button type="button" class="btn btn-danger" id="deleteBtn"&gt; Delete&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Vanessa&lt;/td&gt;
              &lt;td&gt;22&lt;/td&gt;
              &lt;td&gt;foresto@newmotionrp.ru&lt;/td&gt;
              &lt;td&gt;+917078984498&lt;/td&gt;
              &lt;td&gt;
                &lt;button type="button" class="btn btn-warning" id="editBtn"&gt; Edit &lt;/button&gt;
                &lt;button type="button" class="btn btn-danger" id="deleteBtn"&gt; Delete&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="border border-dark rounded bg-warning p-3 mt-5"&gt;
        &lt;form&gt;
          &lt;div class="form-group row"&gt;
            &lt;label for="name" class="col-md-2 col-form-label"&gt;Name&lt;/label&gt;
            &lt;div class="col-md-10"&gt;
              &lt;input class="form-control" type="text" placeholder="Full Name" id="name"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group row"&gt;
            &lt;label for="number" class="col-md-2 col-form-label"&gt;Age&lt;/label&gt;
            &lt;div class="col-md-10"&gt;
              &lt;input class="form-control" type="number" placeholder="Age" id="age"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group row"&gt;
            &lt;label for="email" class="col-md-2 col-form-label"&gt;Email&lt;/label&gt;
            &lt;div class="col-md-10"&gt;
              &lt;input class="form-control" type="email" placeholder="emailaddress@example.com" id="email"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group row"&gt;
            &lt;label for="number" class="col-md-2 col-form-label"&gt;Contact Number&lt;/label&gt;
            &lt;div class="col-md-10"&gt;
              &lt;input class="form-control" type="text" placeholder="Call On" id="number"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;button class="btn btn-primary btn-block" id="done"&gt;ADD&lt;/button&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>