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

<div id="forms">
  <input id="name" type="text" placeholder="Имя">
  <input id="surname" type="text" placeholder="Фамилия">
  <input id="age" type="text" placeholder="Возраст">
  <button type="button" name="button" id="button" onclick="getArr()">Button</button>
</div>

<script>
  // объявляем массив для хранения объектов с информацией о студентах
  let students = [];

  function getArr() {
    let inputAll = Array.from(document.querySelectorAll('#forms input'));

    let obj = {};
    let checkFieldsLength = inputAll.every((el) => el.value.length);

    if (checkFieldsLength) {
      for (const input of inputAll) {
        obj[input.id] = input.value;
      }

      // добавляем объект с информацией о студенте в массив
      students.push(obj);

      // очищаем поля ввода
      for (const input of inputAll) {
        input.value = '';
      }

      // выводим список студентов
      displayStudents();
    } else {
      alert('Не все поля заполнены');
    }
  }

  function displayStudents() {
    let output = '';

    for (const student of students) {
      output += `<li>${student.name} ${student.surname}, возраст: ${student.age}</li>`;
    }

    document.getElementById('students-list').innerHTML = output;
  }
</script>

<ul id="students-list"></ul>