localStorage存储RSVP表单数据后无法在另一页面表格展示，求解决

问题排查点（按出现概率排序） #

1. 存储键名大小写不匹配 #

localStorage的键名大小写完全敏感，确认表单页、感谢页、列表页读写用的键名完全一致，比如表单页存rsvpRecords，列表页读RsvpRecords会直接返回null。

2. 存储逻辑错误，没有用数组保存多条数据 #

大部分拼接代码会出现的问题：每次表单提交直接覆盖同一个键的值，没有做追加逻辑。
正确的表单提交存储逻辑参考：

// 收集表单字段
const newRecord = {
  name: document.querySelector('#name').value,
  phone: document.querySelector('#phone').value,
  // 其他字段按需添加
}
// 读取已有数据，无数据则初始化空数组
const existRecords = JSON.parse(localStorage.getItem('rsvpList') || '[]')
// 追加新记录
existRecords.push(newRecord)
// 序列化后存回localStorage
localStorage.setItem('rsvpList', JSON.stringify(existRecords))

如果你的代码是直接localStorage.setItem('textvalue', 姓名字符串)，每次提交都会覆盖上一条数据，且列表页按数组读取时会拿到非预期值。

3. 列表页渲染逻辑触发时机错误 #

如果渲染代码放在<head>标签内，执行时DOM还未加载完成，找不到表格元素会直接静默失败。
修复方案二选一：

• 将渲染脚本放在</body>闭合标签之前
• 用DOM加载完成事件包裹渲染逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 读取localStorage + 渲染表格的代码放在这里
})

4. 序列化/反序列化缺失 #

localStorage仅支持存储字符串，存对象/数组时没有加JSON.stringify，读取时没有加JSON.parse，会得到[object Object]之类的无效字符串，无法遍历生成表格行。

5. 同站策略限制 #

确认所有页面的协议、域名、端口完全一致，比如不要一个页面用http://127.0.0.1:5500访问，另一个用http://localhost:5500访问，跨域场景下localStorage不共享。

6. 渲染逻辑错误 #

可先在列表页控制台执行console.log(localStorage.getItem('你的存储键名'))，如果能打印出正确的数组字符串，说明问题出在渲染逻辑，参考以下代码调整：

const recordList = JSON.parse(localStorage.getItem('rsvpList') || '[]')
const tableBody = document.querySelector('#guest-table tbody')
// 清空现有内容
tableBody.innerHTML = ''
// 遍历生成表格行
recordList.forEach(record => {
  const tr = document.createElement('tr')
  tr.innerHTML = `
    <td>${record.name}</td>
    <td>${record.phone}</td>
    <!-- 其他字段对应列 -->
  `
  tableBody.appendChild(tr)
})

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