html5不提供自动记录输入历史的功能，autocomplete行为由浏览器控制；需用localstorage手动实现可控历史记录，包括存取、去重、限长和渲染。
HTML5 本身不提供“自动记录输入历史”的功能，input 元素的 autocomplete 行为由浏览器控制，不是开发者直接写代码就能存取的本地历史列表。
为什么 autocomplete="on" 有时不生效
浏览器是否显示下拉历史建议，取决于多个隐性条件：
-
name或id属性值必须是浏览器识别的语义化字段名（如name="email"、name="tel"、name="search"），纯自定义名（如name="myInput"）大概率被忽略 - 用户必须曾在此域名下、对该字段真实提交过内容（仅聚焦/输入不触发记录）
- 浏览器隐私模式、禁用自动填充策略、或清除了表单数据后，历史即消失
- Chrome 对
type="text"且name非标准值的字段，会主动忽略 autocomplete
用 localStorage 手动实现可读写的输入历史
若需完全可控的历史记录（比如搜索框关键词回显、支持删除某条、跨页面保留），必须自己存取。核心逻辑：监听 input 或 submit，把值推入数组并持久化。
const input = document.querySelector('input[name="search"]');
const historyKey = 'searchHistory';
// 读取已有历史（最多 10 条）
let history = JSON.parse(localStorage.getItem(historyKey) || '[]');
// 提交时保存（避免重复）
input.form?.addEventListener('submit', (e) => {
const value = input.value.trim();
if (!value) return;
// 去重：从数组末尾向前找，移除已存在项
const index = history.indexOf(value);
if (index > -1) history.splice(index, 1);
// 插入到开头，限制长度
history.unshift(value);
history = history.slice(0, 10);
localStorage.setItem(historyKey, JSON.stringify(history));
});
// 可选：聚焦时渲染下拉菜单（需配合简单 DOM 操作）
input.addEventListener('focus', () => {
// 此处插入 history 渲染逻辑，例如生成 <datalist> 或浮层 ul
});
datalist 是唯一原生“提示历史”的方式，但不可写
datalist 只能预设静态选项，不能动态加载或保存用户输入。它和 autocomplete 无关，只是视觉上类似下拉建议：
立即学习“前端免费学习笔记（深入）”；
<input list="history" name="search"> <datalist id="history"> <option value="JavaScript"> <option value="HTML5"> </datalist>
- 用户输入时匹配
option[value]前缀，触发提示 - 无法通过 JS 自动把用户新输入添加进
datalist（DOM 可改，但下次页面加载就丢失） - 不解决“记录”问题，只解决“展示预设项”问题
移动端 Safari 和 Chrome 的 autocomplete 差异最大
iOS Safari 对 autocomplete 极其保守：即使 name="search"，也常不显示历史，除非该字段在页面中明确属于 <form></form> 且有 method="get"；而 Chrome 在非 HTTPS 页面可能直接禁用。
- 测试时务必用真实 HTTPS 环境 + 真机
- 不要依赖
autocomplete="history"—— 这个值根本不存在于 HTML 标准中 - 若需兼容性保障，
localStorage+ 自绘下拉是唯一可靠路径
真正可控的历史，永远要自己存、自己读、自己去重、自己限长。浏览器给的 autocomplete 是个黑盒，连清空 API 都没有。
