最省事方案是用 fetch 加载 questions.json，需本地服务器避免 CORS；题库扁平结构，localStorage 存新题并校验字段；渲染用 template 标签防 XSS，导出用 Blob 限数量。
用 fetch 加载题库 JSON 最省事
浏览器里做题交换页面，本质是“展示别人出的题 + 提交自己出的题”，不需要后端也能跑起来。最直接的方式就是把题目存成 questions.json 文件，用 fetch 拉进来渲染。别碰本地 file:// 协议——它会触发 CORS 阻止读取，必须起个最小服务器（比如 npx serve 或 VS Code Live Server 插件）。
常见错误现象：net::ERR_FILE_PROTOCOL 或 Access to fetch at 'file:///...' has been blocked。这不是代码写错了，是浏览器策略卡死的。
- 题库结构建议扁平：每个题用
id、question、options（数组）、answer字段，别嵌套太深 - 加载失败时加个
catch，至少提示“题目加载失败，请刷新”而不是白屏 - 如果题量超 50 道，考虑分页或懒加载，否则首次渲染卡顿明显
用 localStorage 临时存用户新题，不依赖后端
用户点“提交新题”，你不需要立刻发到服务器——先存在 localStorage 里，下次打开还能看到。这比硬推 API 稳定得多，尤其适合离线演示或小范围交换。
使用场景：学生之间传一个 HTML 文件，各自添加题目，再合并 JSON 手动更新。
立即学习“前端免费学习笔记（深入）”；
- 存之前校验必填字段：
question非空、options至少两个、answer在选项索引范围内 - 用
JSON.stringify存，别直接存对象，否则取出来是[object Object] -
localStorage容量约 5–10MB，但单条题数据别超过 1KB，避免撑爆或序列化失败
渲染选择题用 template 标签 + innerHTML 足够用
不用 React/Vue，纯 HTML 就能干净地生成题目列表。关键不是“怎么炫”，而是“换题不重刷整个页面”。用 <template></template> 预定义结构，每次克隆、填值、插入，比拼接字符串安全。
容易踩的坑：直接 innerHTML = '<div>'+ question + '</div>' 会执行 XSS（比如题目里含 <script></script>），哪怕内部用也得转义。
- 选项循环用
options.map((opt, i) => `<label><input type="radio" name="q${id}" value="${i}">${opt}</label>`) - 渲染前对
question和options做opt.replace(/&/g, '&').replace(/, ' 简单转义 - 别给每道题加独立事件监听器，用事件委托：监听
document的change，再用e.target.closest('[data-question-id]')判定来源
导出题目为 JSON 文件需用 Blob + a.download
用户想把本地存的题打包带走？不能靠 console.log(JSON.stringify(…)) 让人手抄。得生成可下载的文件。
性能影响：大题库（>1000 题）生成 Blob 可能卡顿，建议加 loading 状态，且限制导出上限（比如最多 500 道）。
- 核心三步：构造
new Blob([jsonStr], {type: 'application/json'})→URL.createObjectURL(blob)→<a href="url" download="questions.json"></a>触发下载 - IE 不支持
Blob，但 IE 已淘汰；若真要兼容，改用data:text/json;charset=utf-8,URL 方案（有长度限制） - 导出前检查
localStorage是否为空，避免下个空文件还带 BOM 头
真正麻烦的是题目格式统一——有人加图片 base64，有人写 LaTeX，有人混用全角标点。交换页面能跑起来不难，难的是两边题库字段对得上、渲染不崩、答案逻辑一致。这些细节比技术选型更耗时间。
