如何将表单值存入LocalStorage并在页面刷新后保持UI展示？

当前实现中，新增学生后UI能正常显示数据，且数据已存入LocalStorage，但页面刷新后UI中的学生数据会消失。需要补充初始化加载逻辑，从LocalStorage读取数据并渲染到UI。

现有HTML代码 #

<main>
  <div class="container">

    <h1>student's info</h1>

    <form class="input-form">
      <input type="text"class="full-name" name="name" placeholder="Enter Full Name">
      <input type="number"class="age" name="name" placeholder="Age">
      <input type="text" class = "gender"name="name" placeholder="gender">
      <button class="submit-btn" type="submit">submit</button>
    </form>
  </div>

  <div class="con"> 
    <div class="student">
    </div>
  </div>
</main>

现有JavaScript代码 #

// GLOBAL VARIABLES
var submitBtn, student, fullName, age, gender;

submitBtn = document.querySelector('.submit-btn');
student = document.querySelector('.student');
fullName = document.querySelector('.full-name');
age = document.querySelector('.age');
gender = document.querySelector('.gender');

var arr = [];

// EVENTLISTENERS
submitBtn.addEventListener('click', addStudent);

// FUNCTIONS
function addStudent(e) {
  e.preventDefault();

  let div = document.createElement('div');
  div.classList.add('student-box');

  let nameSpan = document.createElement('span');
  nameSpan.classList.add('student-name');
  nameSpan.innerText = fullName.value;

  let ageSpan = document.createElement('span');
  ageSpan.classList.add('student-age');
  ageSpan.innerText = age.value;

  let genderSpan = document.createElement('span');
  genderSpan.classList.add('student-gender');
  genderSpan.innerText = gender.value;

  saveToLocal();

  div.append(nameSpan, ageSpan, genderSpan);

  student.appendChild(div);

  fullName.value = '';
  age.value = '';
  gender.value = '';
}

function saveToLocal() {
  getData();

  arr.push({
    name: fullName.value,
    ages: age.value,
    genders: gender.value,
  });
  localStorage.setItem('student', JSON.stringify(arr));
}

function getData() {
  if (localStorage.getItem('student') !== null) {

    JSON.parse(localStorage.getItem('student'));

    //localStorage.setItem('student', JSON.stringify(arr));
    //var dis = JSON.Parse(localStorage.getItem('student'));
    //student.appendChild();
    //arr = JSON.parse();
    //console.log(arr);

  }/* else {

  }*/
}

修复步骤 #

1. 修正getData函数：将LocalStorage中解析出的数据赋值给全局数组arr，确保新增数据时不会覆盖原有数据：

function getData() {
  if (localStorage.getItem('student') !== null) {
    arr = JSON.parse(localStorage.getItem('student'));
  } else {
    arr = [];
  }
}

2. 添加渲染函数：遍历arr中的学生数据，创建DOM元素并添加到UI中：

function renderStudents() {
  // 先清空现有内容，避免重复渲染
  student.innerHTML = '';
  
  arr.forEach(studentItem => {
    let div = document.createElement('div');
    div.classList.add('student-box');

    let nameSpan = document.createElement('span');
    nameSpan.classList.add('student-name');
    nameSpan.innerText = studentItem.name;

    let ageSpan = document.createElement('span');
    ageSpan.classList.add('student-age');
    ageSpan.innerText = studentItem.ages;

    let genderSpan = document.createElement('span');
    genderSpan.classList.add('student-gender');
    genderSpan.innerText = studentItem.genders;

    div.append(nameSpan, ageSpan, genderSpan);
    student.appendChild(div);
  });
}

3. 页面初始化时加载并渲染数据：在DOM加载完成后，调用getData和renderStudents函数，从LocalStorage读取数据并展示：

// 页面加载完成后初始化数据
document.addEventListener('DOMContentLoaded', () => {
  getData();
  renderStudents();
});

修改后的完整JavaScript代码 #

// GLOBAL VARIABLES
var submitBtn, student, fullName, age, gender;

submitBtn = document.querySelector('.submit-btn');
student = document.querySelector('.student');
fullName = document.querySelector('.full-name');
age = document.querySelector('.age');
gender = document.querySelector('.gender');

var arr = [];

// EVENTLISTENERS
submitBtn.addEventListener('click', addStudent);

// 页面加载完成后初始化数据
document.addEventListener('DOMContentLoaded', () => {
  getData();
  renderStudents();
});

// FUNCTIONS
function addStudent(e) {
  e.preventDefault();

  // 验证输入不为空
  if (!fullName.value || !age.value || !gender.value) return;

  let div = document.createElement('div');
  div.classList.add('student-box');

  let nameSpan = document.createElement('span');
  nameSpan.classList.add('student-name');
  nameSpan.innerText = fullName.value;

  let ageSpan = document.createElement('span');
  ageSpan.classList.add('student-age');
  ageSpan.innerText = age.value;

  let genderSpan = document.createElement('span');
  genderSpan.classList.add('student-gender');
  genderSpan.innerText = gender.value;

  saveToLocal();

  div.append(nameSpan, ageSpan, genderSpan);
  student.appendChild(div);

  // 清空输入框
  fullName.value = '';
  age.value = '';
  gender.value = '';
}

function saveToLocal() {
  getData();

  arr.push({
    name: fullName.value,
    ages: age.value,
    genders: gender.value,
  });
  localStorage.setItem('student', JSON.stringify(arr));
}

function getData() {
  if (localStorage.getItem('student') !== null) {
    arr = JSON.parse(localStorage.getItem('student'));
  } else {
    arr = [];
  }
}

function renderStudents() {
  student.innerHTML = '';
  
  arr.forEach(studentItem => {
    let div = document.createElement('div');
    div.classList.add('student-box');

    let nameSpan = document.createElement('span');
    nameSpan.classList.add('student-name');
    nameSpan.innerText = studentItem.name;

    let ageSpan = document.createElement('span');
    ageSpan.classList.add('student-age');
    ageSpan.innerText = studentItem.ages;

    let genderSpan = document.createElement('span');
    genderSpan.classList.add('student-gender');
    genderSpan.innerText = studentItem.genders;

    div.append(nameSpan, ageSpan, genderSpan);
    student.appendChild(div);
  });
}

内容的提问来源于stack exchange，提问作者Azongo Ismail