如何将表单提交保存为对象数组并在另一页面展示，避免数据覆盖？

当前代码每次提交新学生信息时会覆盖之前的存储内容，原因是直接将单个学生对象存入localStorage的form键中。要实现多条数据的保存与展示，需要将数据以数组形式存储，每次提交时先读取已有数据，再将新数据追加进去，最后重新存入localStorage。

表单提交页修改后代码 #

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const fd = new FormData(form);
    const newStudent = Object.fromEntries(fd);

    // 读取已有学生列表，若无数据则初始化空数组
    let students = JSON.parse(localStorage.getItem('students')) || [];
    // 追加新学生数据
    students.push(newStudent);
    // 将更新后的数组存入localStorage
    localStorage.setItem('students', JSON.stringify(students));

    window.location.href = "allStudents.html";
})

目录页修改后代码 #

// 读取存储的学生列表数组
const students = JSON.parse(localStorage.getItem('students')) || [];

const container = document.getElementById('paragraph');
// 遍历每个学生对象，生成对应的展示内容
students.forEach(student => {
    let studentMarkup = '<div class="student-item">';
    // 遍历单个学生的所有属性
    for (const key in student) {
        studentMarkup += `<span>${key}: ${student[key]}</span><br>`;
    }
    studentMarkup += '</div>';
    container.innerHTML += studentMarkup;
})

改动说明 #

• 存储结构变更：将原来的单个对象存储改为数组存储，键名从form改为students（语义更清晰）
• 提交逻辑优化：提交时先读取已有数组，追加新数据后再重新存储，避免覆盖
• 展示逻辑适配：目录页遍历整个学生数组，每个学生单独生成一组展示内容，区分不同学生的信息

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