表单数据刷新后自动恢复需用localStorage持久化：监听input/change事件实时保存字段值，按form.id和name生成唯一key，区分checkbox/radio、select[multiple]等取值方式；页面加载时回填并处理软键盘时机问题；提交成功后仅清除对应key，避免误删或过早清理。
表单数据在页面刷新后自动恢复
用户填了一半表单就刷新页面，数据全丢了——这不是体验问题，是没做 localStorage 持久化。核心逻辑很简单：监听输入变化，把字段值按 name 或 id 存进 localStorage；页面加载时读取并回填。
注意别直接监听 change 事件，它只在失焦后触发，漏掉实时输入。用 input 事件更稳妥，但要注意 textarea、select、input[type="checkbox"] 和 input[type="radio"] 的取值方式不同：
-
input和textarea：用element.value -
checkbox/radio：用element.checked，存布尔值；多选时得遍历同 name 全部元素 -
select[multiple]：得用Array.from(element.selectedOptions).map(o => o.value)
示例片段（不依赖框架）：
function saveFormToStorage(form) {
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(el => {
const key = `form_${form.id || 'default'}_${el.name || el.id}`;
if (el.type === 'checkbox' || el.type === 'radio') {
localStorage.setItem(key, el.checked);
} else if (el.tagName === 'SELECT' && el.multiple) {
localStorage.setItem(key, JSON.stringify(Array.from(el.selectedOptions).map(o => o.value)));
} else {
localStorage.setItem(key, el.value);
}
});
}
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('input', () => saveFormToStorage(form));
form.addEventListener('change', () => saveFormToStorage(form)); // 兜底 checkbox/radio
// 页面加载时回填
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(el => {
const key = `form_${form.id || 'default'}_${el.name || el.id}`;
const saved = localStorage.getItem(key);
if (saved === null) return;
if (el.type === 'checkbox' || el.type === 'radio') {
el.checked = saved === 'true';
} else if (el.tagName === 'SELECT' && el.multiple) {
try {
const values = JSON.parse(saved);
Array.from(el.options).forEach(opt => opt.selected = values.includes(opt.value));
} catch {}
} else {
el.value = saved;
}
});
});
提交成功后清空本地缓存
用户点“提交”按钮后，如果服务器返回成功响应，必须立刻清除对应表单的 localStorage 条目，否则下次打开页面还会显示旧数据，造成混淆。
立即学习“前端免费学习笔记（深入）”；
关键点在于：清空动作不能放在表单 submit 事件里直接执行，因为默认行为会跳转或刷新；要等异步请求完成后再清理：
- 用
fetch或axios提交时，在then或await后调用清除函数 - 清除范围要和保存时一致：按
form.id+ 字段name构造 key，逐个localStorage.removeItem() - 别用
localStorage.clear()，会误删其他功能的数据（比如用户偏好设置）
常见错误：提交失败后也清了缓存，导致用户无法重试——应该只在 HTTP 状态码为 2xx 且业务返回 success: true 时才清理。
避免 localStorage 被跨域 iframe 或同域名其他页面污染
localStorage 是按协议+域名+端口共享的。如果同一域名下有多个独立表单页（如 /apply 和 /contact），共用一个 form_default_* 前缀就会互相覆盖。
解决方案是让 key 具备上下文唯一性：
- 用
location.pathname或页面特定标识（如data-form-scope="apply-v2"）参与 key 构建 - 不要依赖
form.id——很多表单压根没设 id，或 id 不唯一 - 对敏感字段（如身份证号、银行卡号），考虑不存入
localStorage，改用内存缓存（sessionStorage更合适，关闭标签页即销毁）
另外，Safari 在无痕模式下会拒绝写入 localStorage，捕获 QuotaExceededError 并降级到内存缓存是必要的容错手段。
移动端软键盘弹起导致页面滚动、回填失效
iOS Safari 和部分安卓浏览器中，软键盘弹出会触发 resize 或滚动，有时导致 DOM 重排，刚回填的值被清空或未渲染出来。
这不是数据没存好，而是 DOM 状态没稳定就执行了回填。应对方式：
- 把回填逻辑放在
setTimeout(() => { ... }, 0)或requestAnimationFrame中，确保在渲染队列末尾执行 - 对
input[type="date"]、input[type="tel"]等唤起特殊键盘的字段，单独加延迟（50–100ms）再赋值 - 避免在
focus事件中立即回填，可能和键盘动画冲突
真正难调试的是那种“偶尔失效”的情况——往往就是软键盘时机问题，而不是逻辑缺陷。
