JavaScript 中怎么实现表单输入历史记录保存功能-js教程-PHP中文网

JavaScript实现表单输入历史记录保存的核心是按字段名独立监听input事件、去重限条存入localStorage（如formFieldHistory_${name}），聚焦时以下拉列表形式提示历史选项供点击选用，支持手动清空单字段历史，并做异常捕获与敏感字段过滤。

javascript 中怎么实现表单输入历史记录保存功能

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> 列表，点击后才填入值：

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载