如何获取表单数据追加到表格，含localStorage及服务端实现求助

现有代码的核心问题 #

• 变量引用错误：声明的DOM节点变量名为result，后续赋值innerHTML时误用了未定义的myresult变量，直接导致渲染失败
• 数据存储逻辑错误：当前每次提交都会直接覆盖localStorage里的save字段，只能保留最新一条记录，无法实现提交记录追加
• 跨页面逻辑耦合：你将表单提交监听和表格渲染逻辑写在同一个函数中，但表单和表格分属两个页面，会导致页面找不到对应DOM元素直接报错
• 函数未触发：如果没有主动调用refresh()，整个逻辑不会执行

1. 表单页面代码（仅负责收集数据、存本地存储、跳转）

// 页面加载完成后绑定表单提交事件
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById("myform");
  form.addEventListener("submit", e => {
    e.preventDefault(); 
    const { elements } = form;
    // 读取已有存储的记录，没有就初始化空数组
    const savedList = JSON.parse(localStorage.getItem("saveList")) || [];
    // 追加新提交的记录
    savedList.push({
      name: elements.name.value, 
      lastname: elements.lastname.value,
    });
    // 存回localStorage
    localStorage.setItem("saveList", JSON.stringify(savedList));
    // 跳转到表格展示页，替换成你自己的结果页地址
    location.href = 'result.html';
  })
})

2. 表格展示页面代码（仅负责读取存储、渲染表格）

// 页面加载完成后渲染表格
document.addEventListener('DOMContentLoaded', () => {
  const myresult = document.getElementById("myresult");
  // 读取存储的记录
  const savedList = JSON.parse(localStorage.getItem("saveList")) || [];
  if (savedList.length === 0) {
    myresult.innerHTML = '<p>暂无提交记录</p>';
    return;
  }
  // 拼接表格HTML
  let tableHtml = `
  <table>
    <tr>
      <th>Name</th>
      <th>LastName</th>
    </tr>
  `;
  // 遍历所有记录生成行
  savedList.forEach(item => {
    tableHtml += `
    <tr>
      <td>${item.name}</td>
      <td>${item.lastname}</td>
    </tr>
    `;
  });
  tableHtml += '</table>';
  myresult.innerHTML = tableHtml;
})

注意事项 #

localStorage仅能实现单设备单浏览器的本地数据持久化，不同设备/不同浏览器之间数据无法共享，要实现多用户共享数据必须对接后端服务存储。

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