用sessionStorage保存表单草稿，关闭标签页即清空，适合临时场景；监听input事件实时存取，DOM加载后自动恢复，提交或放弃时及时清理。
用 sessionStorage 保存未提交的表单草稿，核心是「用户关闭页面前自动存，页面加载时自动取」，且只在当前浏览器标签页有效，关掉就清空，正适合临时草稿场景。
监听输入并实时保存到 sessionStorage
不用等用户点“保存”，每次输入变化就存一次，体验更可靠。推荐监听 input 事件（兼容文本框、多选、单选、下拉等）：
- 给表单加个唯一 ID（如
id="draft-form"），方便统一处理 - 遍历所有可输入子元素（
input、textarea、select），读取值并按 name 或 id 组织成对象 - 用
JSON.stringify()转成字符串，存入sessionStorage，键名建议带页面标识（如"form-draft-contact"）
页面加载时自动恢复草稿
用户刷新或误关后重新打开页面，脚本应主动检查是否有草稿并填充：
- 在 DOM 加载完成（
DOMContentLoaded）后读取对应 key 的值 - 用
JSON.parse()还原为对象，再逐项匹配表单字段的name属性赋值 - 注意处理 checkbox/radio：需比对
value并设置checked状态，而非只设value
用户主动提交或放弃时及时清理
避免残留无效数据，提升安全性与准确性：
- 表单成功提交（如 AJAX 返回 200）后，调用
sessionStorage.removeItem(key) - 用户点击“清空草稿”或“新建表单”按钮时，同样清除对应 key
- 可选：监听
beforeunload做最后一次保存（但注意该事件中不能执行异步操作）
注意事项和小技巧
sessionStorage 不跨标签页，也不持久化——这既是限制也是优势：
- 同一域名下不同标签页互不干扰，适合多任务编辑
- 不适用于需要长期保存或跨设备同步的场景（此时该用 localStorage 或后端存储）
- 敏感字段（如密码、身份证号）不应存入 sessionStorage，即使临时也不建议
- 移动端 Safari 在某些后台状态下可能提前清空 sessionStorage，关键操作仍需服务端兜底
