JavaScript实现表单输入历史记录保存的核心是按字段名独立监听input事件、去重限条存入localStorage（如formFieldHistory_${name}），聚焦时以下拉列表形式提示历史选项供点击选用，支持手动清空单字段历史，并做异常捕获与敏感字段过滤。
JavaScript 中实现表单输入历史记录保存，核心是监听用户输入、捕获值、存入本地存储（如 localStorage），并在页面加载或聚焦时自动还原或提示历史选项。关键不在于“记住所有”，而在于“按字段、可管理、不干扰当前操作”。
按字段名独立保存输入历史
不同输入框（如搜索框、用户名、邮箱）应各自维护历史，避免混用。推荐以 formFieldHistory_${name} 为键名存储 JSON 数组：
- 使用
input或change事件监听实时输入（input更及时，change适合失焦后保存） - 每次保存前去重并限制条数（例如最多保留 5 条），避免无限增长
- 示例逻辑：
const saveToHistory = (field, value) => { if (!value.trim()) return; const key = `formFieldHistory_${field.name}`; const history = JSON.parse(localStorage.getItem(key) || '[]'); const updated = [value, ...history.filter(v => v !== value)].slice(0, 5); localStorage.setItem(key, JSON.stringify(updated)); };
聚焦时显示下拉历史建议（非自动填充）
历史记录应作为“建议”出现，而不是覆盖用户当前输入。常用做法是：聚焦输入框时，在其下方动态插入一个 <ul></ul> 列表，点击后才填入值：
- 读取对应字段的历史数组，生成
<li>项，绑定点击事件填入当前 input - 点击列表项或按下
Enter时，把选中值赋给 input 并触发input事件（确保 Vue/React 等框架能响应） - 失去焦点或点击空白处时，自动移除历史列表，避免遮挡
- 注意：不要用
autocomplete="on"替代——它由浏览器控制，不可定制、不跨设备、无法按字段管理
支持手动清除某字段历史
用户可能想清空某个输入框的历史，比如邮箱输错多次后想重来。可提供一个小型清空按钮（如带 × 图标的 <button></button>）紧邻输入框：
立即学习“Java免费学习笔记（深入）”；
- 按钮点击时调用
localStorage.removeItem(`formFieldHistory_${fieldName}`) - 同时隐藏或清空当前显示的历史列表
- 无需弹窗确认，但可加简短 tooltip 提示“已清空历史”
兼容性与边界处理
本地存储有容量限制（通常 5–10MB），且不适用于敏感信息（如密码、身份证号）：
- 对
type="password"或含data-no-history属性的字段，跳过保存逻辑 - 捕获
localStorage.setItem异常（如用户禁用存储或空间满），降级为内存缓存（刷新即丢） - 在 Safari 无痕模式等场景下，
localStorage可能抛错，需try/catch包裹 - 多标签页写入冲突极小，但若需强一致性，可用
storage事件监听其他标签页变更（一般不需要）
