表单草稿保存技巧及代码实现

本文介绍了如何利用 sessionStorage 实现表单草稿的自动保存与恢复——通过监听 input 事件实时捕获用户输入、页面加载时自动还原未提交内容，并在成功提交或用户主动放弃时及时清理数据，既显著提升用户体验、防止意外丢失，又充分发挥 sessionStorage“仅限当前标签页、关闭即清空”的临时性优势，特别适合需要轻量级、无后端依赖的草稿保护场景，同时提醒避开敏感信息存储和移动端兼容性等常见陷阱。

用 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，关键操作仍需服务端兜底

本篇关于《表单草稿保存技巧及代码实现》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！