JavaScript 中用 sessionStorage 暂存表单草稿需监听 input 事件实时保存、页面加载时恢复值、提交后及时清理；支持 checkbox/radio 特殊处理，注意类型转换和同源限制，并可增强时间戳标记与函数封装。
在 JavaScript 中用 sessionStorage 暂存表单草稿，核心是监听用户输入并实时保存，同时在页面加载时自动恢复。它适合单次会话（关闭标签页即清空），比 localStorage 更安全，避免跨会话污染。
监听页面输入并自动保存草稿
对表单内所有可编辑字段（input、textarea、select）绑定 input 或 change 事件，将当前值存入 sessionStorage：
- 推荐用
input事件（实时响应，包括粘贴、删除等） - 为每个字段设置唯一 key，例如
"draft-username"、"draft-message" - 使用
JSON.stringify()存对象更灵活（如整个表单状态）
示例代码：
const form = document.getElementById('myForm');
const fields = form.querySelectorAll('input, textarea, select');
fields.forEach(field => {
field.addEventListener('input', () => {
const key = `draft-${field.name || field.id}`;
sessionStorage.setItem(key, field.value);
});
});
页面加载时自动恢复草稿
在 DOM 加载完成后（如 DOMContentLoaded），遍历已保存的草稿项，匹配字段名并还原值：
立即学习“Java免费学习笔记（深入）”；
- 只恢复当前页面存在的字段，避免报错
- 对
checkbox/radio需单独处理checked属性 - 恢复后可选地给用户提示：“检测到未提交的草稿，已自动填充”
示例代码：
document.addEventListener('DOMContentLoaded', () => {
fields.forEach(field => {
const key = `draft-${field.name || field.id}`;
const saved = sessionStorage.getItem(key);
if (saved !== null) {
if (field.type === 'checkbox' || field.type === 'radio') {
field.checked = saved === 'true';
} else {
field.value = saved;
}
}
});
});
提交成功后及时清理草稿
表单提交成功（如 AJAX 返回 200 或跳转完成）后，必须清除对应草稿，否则下次打开还会显示旧内容：
- 可在
fetch的then或表单submit事件成功回调中执行 - 批量删除：遍历所有字段 key 并调用
sessionStorage.removeItem() - 或直接清空全部草稿：
Object.keys(sessionStorage).filter(k => k.startsWith('draft-')).forEach(k => sessionStorage.removeItem(k))
注意事项与增强建议
注意点：
-
sessionStorage是字符串存储，数值、布尔等类型需手动转换（如JSON.parse()） - 同源限制严格，不同协议/端口/子域名互不可见
- 移动端键盘收起或页面切后台时可能触发
blur，建议仍以input为主
可选增强：
- 加时间戳标记最后修改时间，便于判断草稿是否过期
- 封装成可复用函数，支持传入表单 ID 和前缀，提升维护性
- 配合
beforeunload提示用户“有未保存草稿”，防止误关页
