How to save the data in local storage?

Question

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.

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.

  let addRow = () => { 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=` <td>${name}</td> <td>${age}</td> <td>${email}</td> <td>${contact}</td> <td> <button type="button" class="btn btn-warning" id="editBtn"> Edit </button> <button type="button" class="btn btn-danger" id="deleteBtn"> Delete </button> </td>` 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) => { if (event.target.matches("#deleteBtn")) { let row = event.target.closest("tr"); row.remove(); } }); document.getElementById("tableDisplay").addEventListener("click", (event) => { 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 = `<button type="button" class="btn btn-primary" id="saveBtn"> Save </button>`; } }); document.getElementById("tableDisplay").addEventListener("click", (event) => { if (event.target.matches("#saveBtn")) { let row = event.target.closest("tr"); row.setAttribute("contenteditable", "false"); alert("Row data changed!"); row.cells[4].innerHTML = ` <button type="button" class="btn btn-warning" id="editBtn"> Edit </button> <button type="button" class="btn btn-danger" id="deleteBtn"> Delete </button>`; } }); document.getElementById("done").addEventListener("click", addRow); 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="border border-dark rounded p-1 bg-light"> <table class="text-center table" align="center" id="tableDisplay"> <tr class="bg-warning"> <th>Name</th> <th>Age</th> <th>Email</th> <th>Contact Number</th> <th></th> </tr> <tr> <td>John</td> <td>26</td> <td>foresto@worksmail.tk</td> <td>+917007984498</td> <td> <button type="button" class="btn btn-warning" id="editBtn"> Edit </button> <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button> </td> </tr> <tr> <td>Jimmy</td> <td>45</td> <td>foresto@official-sunveno.ru</td> <td>+917007985598</td> <td> <button type="button" class="btn btn-warning" id="editBtn"> Edit </button> <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button> </td> </tr> <tr> <td>Sarah</td> <td>32</td> <td>foresto@abac-compressoren.ru</td> <td>+917897984498</td> <td> <button type="button" class="btn btn-warning" id="editBtn"> Edit </button> <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button> </td> </tr> <tr> <td>Vanessa</td> <td>22</td> <td>foresto@newmotionrp.ru</td> <td>+917078984498</td> <td> <button type="button" class="btn btn-warning" id="editBtn"> Edit </button> <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button> </td> </tr> </table> </div> <div class="border border-dark rounded bg-warning p-3 mt-5"> <form> <div class="form-group row"> <label for="name" class="col-md-2 col-form-label">Name</label> <div class="col-md-10"> <input class="form-control" type="text" placeholder="Full Name" id="name"> </div> </div> <div class="form-group row"> <label for="number" class="col-md-2 col-form-label">Age</label> <div class="col-md-10"> <input class="form-control" type="number" placeholder="Age" id="age"> </div> </div> <div class="form-group row"> <label for="email" class="col-md-2 col-form-label">Email</label> <div class="col-md-10"> <input class="form-control" type="email" placeholder="emailaddress@example.com" id="email"> </div> </div> <div class="form-group row"> <label for="number" class="col-md-2 col-form-label">Contact Number</label> <div class="col-md-10"> <input class="form-control" type="text" placeholder="Call On" id="number"> </div> </div> </form> <button class="btn btn-primary btn-block" id="done">ADD</button> </div> 

Answer 1

There is a little bit of an issue with your HTML. You have multiple elements with the same id: eg

id="editBtn" & id="deleteBtn".  

Also, you have five columns in the th, but only 4 in the rows. I edited the HTML and the JS a bit, so that it looks like it will delete the rows. The way that you had it is was appending the row after the tbody, but you want that before the tbody, so I added an id to tbody, but you could handle that another way.

window.delRow = function(element)

is there because Fiddle apparently wraps the functions in a function so that there was a problem calling that. Not really a complete answer, but I hope that helps. You would have to see what browser support there is for:

element.closest('tr').remove();

I changed the HTML to this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="border border-dark rounded p-1 bg-light">
    <table class="text-center table" align="center" id="tableDisplay">
      <thead class="bg-warning">
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
          <th>Contact Number</th>
          <th></th>
        </tr>
      </thead>
      <tbody id = "tabelBody">
        <tr>
          <td>1</td>
          <td>Hello</td>
          <td>2</td>
          <td>2</td>
          <td>
            <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
          </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Hello</td>
            <td>2</td>
            <td>2</td>
            <td>
              <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
              <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
            </td>
          </tr>
          <tr>
              <td>3</td>
              <td>Hello</td>
              <td>2</td>
              <td>2</td>
              <td>
                <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
              </td>
            </tr>
      </tbody>
    </table>
  </div>
  <div class="border border-dark rounded bg-warning p-3 mt-5">
    <form>
      <div class="form-group row">
        <label for="name" class="col-md-2 col-form-label">Name</label>
        <div class="col-md-10">
          <input class="form-control" type="text" placeholder="Full Name" id="name">
        </div>
      </div>
      <div class="form-group row">
        <label for="number" class="col-md-2 col-form-label">Age</label>
        <div class="col-md-10">
          <input class="form-control" type="number" placeholder="Age" id="age">
        </div>
      </div>
      <div class="form-group row">
        <label for="email" class="col-md-2 col-form-label">Email</label>
        <div class="col-md-10">
          <input class="form-control" type="email" placeholder="emailaddress@example.com" id="email">
        </div>
      </div>
      <div class="form-group row">
        <label for="number" class="col-md-2 col-form-label">Contact Number</label>
        <div class="col-md-10">
          <input class="form-control" type="text" placeholder="Call On" id="number">
        </div>
      </div>
    </form>    
    <button class="btn btn-primary btn-block" id="done">ADD</button>
  </div>

and the JS to this:

let addRow = () => {
  let name = document.getElementById("name").value;
  let age = document.getElementById("age").value;
  let email = document.getElementById("email").value;
  let contact = document.getElementById("number").value;

  let tr=document.createElement('tr');
  tr.innerHTML=`
  <td>${name}</td>
  <td>${age}</td>
  <td>${email}</td>
  <td>${contact}</td>
  <td>
    <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
  </td>`

  document.getElementById("tabelBody").appendChild(tr);
  document.getElementById("name").value = '';
  document.getElementById("age").value = '';
  document.getElementById("email").value = '';
  document.getElementById("number").value = '';
  document.getElementById("tableDisplay").value = '';
};

window.delRow = function(element) {
    alert("test");
  element.closest('tr').remove();
}

document.getElementById("done").addEventListener("click", addRow);

Not sure exactly what you wanted to do when editing.

There is apparently a Fiddle setting regarding wrapping of JS.