使用JavaScript与JSON生成HTML测验页面异常及本地存储问题排查

一、JSON解析与页面渲染常见问题 #

• JSON文件加载错误：检查是否通过fetch/XMLHttpRequest正确加载JSON，确认文件路径无误，控制台是否有404报错。本地直接打开HTML文件可能因跨域限制无法加载JSON，需用本地服务器（如python -m http.server）运行。
• JSON格式错误：校验JSON语法（确保无多余逗号、引号匹配、键名带双引号），用try-catch包裹JSON.parse()捕获解析报错。
• 渲染逻辑问题：遍历题目数据时，确认单选框name属性与题目ID绑定（保证同一题目选项互斥）；检查DOM元素是否正确插入页面容器，避免选择器错误导致元素未挂载。

二、localStorage存储功能问题 #

• 存储时机错误：未绑定单选框的change事件，导致选中答案时未触发存储；或存储代码放在DOM未加载完成的位置，事件绑定失效。
• 存储格式问题：localStorage.setItem()仅接受字符串值，存储对象需先用JSON.stringify()转换，读取时用JSON.parse()解析。
• 键名冲突或读取错误：用question-${id}这类唯一键名区分不同题目，读取时确保键名一致；页面刷新后需从localStorage读取值并回显到对应选项。

三、调试建议 #

• 打开浏览器控制台（F12），查看Console面板的报错信息定位问题。
• 在关键代码处添加console.log()，比如JSON加载后打印数据、选中选项时打印存储内容，确认数据正确性。
• 查看Application面板的localStorage项，确认是否有数据存入及格式是否符合预期。

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