使用 sessionStorage 可在表单校验失败后保留并还原用户输入，它轻量、同标签页持久、不跨页干扰；监听 input 事件实时存储字段值，提交失败后遍历表单控件读取并恢复，注意 checkbox/radio 的 checked 状态及兼容性问题。
表单校验失败后保留用户输入，用 sessionStorage 是轻量又可靠的方式——它在当前浏览器标签页生命周期内持续存在，关闭标签即清空，不跨页干扰，也不像 localStorage 那样长期残留。
监听页面输入并实时存入 sessionStorage
在用户输入时（如 input、textarea、select 等）监听 input 或 change 事件，把字段名和值存进 sessionStorage。推荐用 input 事件，能覆盖键盘输入、粘贴、自动填充等多种场景。
示例代码：
const form = document.getElementById('myForm');
form.addEventListener('input', function (e) {
const field = e.target;
if (field.name) {
sessionStorage.setItem(`form_${field.name}`, field.value);
}
});
表单提交失败后自动还原输入值
当后端返回校验失败（例如 HTTP 400 或 JSON 中含 errors 字段），不要刷新页面，而是调用还原函数，从 sessionStorage 中读取并填回对应字段。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
还原逻辑建议：
- 遍历表单所有可填写的控件（
input:not([type="submit"]):not([type="button"])、textarea、select） - 用字段
name拼出 key（如form_username），查找对应存储值 - 对
checkbox和radio要额外处理：只恢复选中状态（checked = true），且需比对value - 还原完成后，可选地清除已成功提交的字段缓存（避免下次误填）
注意兼容性与边界情况
sessionStorage 在现代浏览器中支持良好（IE8+），但需留意：
- 同源限制：不同协议、域名、端口之间无法共享
- 隐私模式下部分浏览器会禁用或清空
sessionStorage（如 Safari 无痕窗口） - 字段名含特殊字符（如点号、中括号）时，key 命名建议做简单转义（如替换
.为_） - 大文本（如长文章）可能触发存储上限（通常约 5–10MB），但普通表单字段几乎不会触及
补充：服务端重定向场景下的处理
如果后端采用传统跳转（如 302 重定向回表单页），页面会刷新，此时需在新页面加载完成后立即还原：
window.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('myForm');
for (let i = 0; i < form.length; i++) {
const field = form[i];
if (!field.name) continue;
const saved = sessionStorage.getItem(`form_${field.name}`);
if (saved !== null) {
if (field.type === 'checkbox' || field.type === 'radio') {
field.checked = field.value === saved;
} else {
field.value = saved;
}
}
}
});
同时建议在表单成功提交后，调用 sessionStorage.removeItem() 或 sessionStorage.clear() 清理缓存，避免残留旧数据。
