Извлечение данных localStorage

var contacts = []; 
var Contact = function(name, surname, phone) { 
  this.name = name; 
  this.surname = surname; 
  this.phone = phone; 
} 
var addContact = function() { 
  var nameValue = document.querySelector('#name').value 
  var surnameValue = document.querySelector('#surname').value 
  var phoneValue = document.querySelector('#phone').value 
  var contact = new Contact(nameValue, surnameValue, phoneValue); 
  validate(); 
  if (nameValue && surnameValue && phoneValue) { 
    contacts.push(contact); 
    localStorage.setItem('tab', JSON.stringify(contacts)); 
    updateTable(); 
  } 
} 
var updateTable = function() { 
  const tbody = document.querySelector('#contacts-table tbody'); 
  while (tbody.firstChild) { 
    tbody.removeChild(tbody.firstChild); 
  } 
  for (var i = 0; i < contacts.length; i++) { 
    const { 
      name, 
      surname, 
      phone 
    } = contacts[i]; 
    let tr = document.createElement('tr'); 
    tr.innerHTML = `<td>${i+1}</td><td>${name}</td><td>${surname}</td><td>${phone}</td>`; 
    tbody.appendChild(tr); 
  } 
} 
var validate = function(customerId) { 
  var elements = document.querySelectorAll('.form-control'); 
  for (var i = 0; i < elements.length; i++) { 
    var element = elements[i]; 
    if (element.hasAttribute("rule-required")) { 
      element.classList.add('invalid'); 
      if (!element.value && !document.getElementById("req" + i)) { 
        var mass = document.createElement('div'); 
        mass.setAttribute("id", "req" + i); 
        mass.classList.add('ivalid'); 
        mass.innerHTML = 'Заполните поле'; 
        console.log(mass); 
        element.parentNode.appendChild(mass); 
      } else if (element.value && document.getElementById('req' + i)) { 
        resetMass = document.getElementById('req' + i); 
        resetMass.remove(); 
      } 
    } 
  } 
} 
window.onload = updateTable;

#customerId { 
  width: 200px; 
  margin: 0 auto; 
} 
 
#contacts-table { 
  width: 200px; 
  margin: 0 auto; 
} 
 
.ivalid { 
  color: red; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
 
 
 
<form name="customer" id="customerId"> 
 
  <div class="form-group"> 
    <label for='name'>Ваше имя</label> 
    <input class="form-control" id="name" type="text" name="customerName" placeholder="введите имя" rule-required/> 
  </div> 
  <div class="form-group"> 
    <label for='lastname'>Ваша Фамилия </label> 
    <input class="form-control" id="surname" type="text" placeholder=" введите фамилию" rule-required/> 
  </div> 
  <div class="form-group"> 
    <label for='number'>Номер телефона</label> 
    <input class="form-control" id="phone" type="number" placeholder="введите номер" rule-required/> 
  </div> 
  <div class="form-group"> 
    <button type="button" onclick="addContact(this.form)" class="btn btn-default" id="btn">Добавить</button> 
  </div> 
</form> 
<table class="table" id='contacts-table'> 
  <thead> 
    <tr> 
      <th scope="col">#</th> 
      <th scope="col">Имя</th> 
      <th scope="col">Фамилия</th> 
      <th scope="col">Телефон</th> 
    </tr> 
  </thead> 
  <tbody id='tbody'> 
 
  </tbody> 
</table>