SessionStorage适合保存表单草稿,因其在当前标签页关闭前有效且不发往服务器;需实时监听输入、合理触发保存(input/change事件+防抖)、用语义化键名区分表单、加载时恢复非空字段并清理成功提交后的草稿。

SessionStorage 适合保存表单草稿,因为它在当前标签页关闭前一直有效,且不随请求发往服务器。关键在于「实时监听输入 + 合理触发保存 + 页面加载时恢复」。
监听页面输入并自动保存草稿
对表单内常见控件(input、textarea、select)绑定 input 或 change 事件,每次变化后把当前值存入 SessionStorage。
-
input事件适合实时捕获文本框内容(包括中文输入法未上屏时的中间状态) -
change更适合select或checkbox等操作完成才需保存的场景 - 建议加防抖(如延迟 300ms),避免高频写入影响性能
用唯一键名组织草稿数据
不要直接用 sessionStorage.setItem('form', JSON.stringify(data)) 这种笼统方式。应为每个表单分配语义化键名,例如:
-
draft-contact-form-v1(联系表单 v1 版) -
draft-article-edit-20240520(带时间戳或 ID,避免多页冲突)
这样多个表单共存、或用户开多个标签页编辑不同内容时不会互相覆盖。
批量分析录音转写,输出多维度拓客报告。触发词:录音分析、总结、音频总结、拜访记录总结。当用户提及「分析录音」「看看录音数据」「最近的录音」「通话记录」且意图为批量统计/分析时触发。仅出现「录音」或「拜访」时需结合上下文,若仅查看单条详情则不触发。
立即学习“Java免费学习笔记(深入)”;
页面加载时尝试恢复草稿
在页面 DOM 加载完成后(如 DOMContentLoaded),读取对应键名的草稿,解析 JSON 并填充到表单字段中:
- 只恢复存在且非空的字段,避免覆盖用户已清空的内容
- 对
checkbox/radio要检查checked属性,而不仅是value - 恢复后可提示用户「检测到未提交的草稿,是否继续编辑?」(可选 UX 增强)
提交成功后及时清理草稿
表单成功提交(如收到 200 响应)后,务必调用 sessionStorage.removeItem(key) 清除对应草稿。
- 防止用户误点「返回」又看到旧数据,造成混淆
- 若使用 AJAX 提交,确保在 success 回调里清理;若用原生 form submit,可在
submit事件处理函数末尾清理(注意兼容性)

















