用 sessionStorage 实现问卷暂存续填，核心是页面关闭前自动保存+加载时自动恢复，数据以对象形式统一存储，通过 data-form-id 区分多问卷，绑定 input/change 事件实时保存并兜底 beforeunload，DOMContentLoaded 时恢复填写，提交成功后立即清除。
用 sessionStorage 实现问卷暂存续填，核心是“页面关闭前自动保存 + 页面加载时自动恢复”，它不依赖后端、无需登录，适合单次会话内的临时断点续填。
数据结构设计：用对象统一管理所有题目的答案
不要为每道题单独设 key，而是把整份问卷答案存为一个对象，键名对应题目 ID 或 name 属性，值为用户填写的内容。这样便于批量读写、逻辑清晰，也避免 key 冲突。
- 示例结构：{ "q1": "选项A", "q2": "其他：很不满意", "q3_text": "我建议……" }
- 推荐在表单最外层加
data-form-id="survey-v1"，用它作为sessionStorage的存储 key（如"survey_v1_data"），方便多问卷共存
自动保存：监听输入事件 + 页面卸载前兜底
仅靠 blur 或 change 容易漏存（比如用户直接关页）。应组合使用：
- 对文本框、文本域、单选/复选框绑定
input或change事件，实时更新内存对象并同步写入sessionStorage - 务必监听
beforeunload事件，在用户关闭或刷新前再强制保存一次，防止最后几秒操作丢失 - 注意：不要在
beforeunload中执行异步操作（如fetch），它会阻塞且不可靠
自动恢复：页面加载时读取并填充表单
在 DOM 加载完成后（如 DOMContentLoaded），立即从 sessionStorage 读取数据，并逐项还原到对应表单控件：
立即学习“前端免费学习笔记（深入）”；
- 遍历存储的对象，用
document.querySelector('[name="' + key + '"]')找到控件 - 文本类（
input[type="text"]、textarea）设.value；单选/复选框需判断类型，用.checked = (value === this.value)；下拉框设.value - 恢复后可显示提示条（如“已为您恢复上次填写内容”），提升用户体验
清理时机：提交成功后主动清除
用户点击“提交”并收到成功响应后，应立刻调用 sessionStorage.removeItem("survey_v1_data")。这能避免误重复提交，也防止旧数据干扰下一次填写。
- 不要等页面跳转后再清——跳转可能失败，数据残留
- 如果提交是 AJAX，确保在
then或success回调里清除；若用form.submit()，可在提交前清除（因同步提交会终止当前 JS 执行） - 可额外加个“清空草稿”按钮，供用户主动放弃当前填写
