纯前端搜索历史管理需用localStorage持久化存储并严格去重截断，通过createElement安全渲染按钮列表，点击回填时需触发input和keydown事件确保逻辑响应，清空操作须同步数据、DOM与内存。
纯前端无法自动获取浏览器真实搜索历史，必须自己存、自己读、自己渲染——localStorage 是唯一可靠载体，sessionStorage 适合临时足迹，但搜索历史通常要跨会话保留。
用 localStorage 存关键词并去重
每次搜索提交后，不是直接 push，而是先判断是否已存在（注意大小写和空格）：
- 统一用
term.trim().toLowerCase()处理输入值 - 用
!history.some(t => t.toLowerCase() === term.toLowerCase())替代includes()，避免大小写误判 - 新词用
unshift()插到开头，再slice(0, 10)截取最新 10 条 - 写入前必须
JSON.stringify()，读取时用JSON.parse(localStorage.getItem('searchHistory') || '[]')
动态生成历史列表 HTML 结构
别用 innerHTML 拼接用户输入内容，否则有 XSS 风险；改用 document.createElement 安全插入：
- 容器用
<div id="search-history-list"></div>，不用<datalist>——后者只支持模糊匹配，不支持点击回填 - 每个历史项用
<button type="button" data-query="xxx"></button>，便于绑定 click 事件 - 渲染时循环创建 button，设置
textContent（不是innerHTML），再 append 到容器 - 清空列表时用
container.innerHTML = ''或while(container.firstChild) container.removeChild(container.firstChild)
点击历史项回填搜索框并聚焦
不能只设 input.value = query，还要触发后续行为（比如回车搜索）：
立即学习“前端免费学习笔记（深入）”；
- 绑定 click 事件到按钮上，读取
event.target.dataset.query - 填值后立即调用
input.focus()，否则移动端软键盘不弹出 - 手动触发
input.dispatchEvent(new Event('input', { bubbles: true }))，确保防抖或自动补全逻辑能响应 - 如果搜索框监听了
keydown的 Enter，点击历史项后可额外加一句input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter' }))
清空历史按钮的实现细节
看似简单，但容易漏掉两个关键点：
- 点击后不仅要
localStorage.removeItem('searchHistory')，还得同步清空 DOM 和内存中的 history 数组 - 按钮本身应设
disabled状态防止重复点击，尤其在 localStorage 写入耗时较长的低端设备上 - 建议加一次确认：用
if (!confirm('确定清空所有搜索历史？')) return，避免误触 - 清空后立刻重新渲染列表（哪怕为空），否则 UI 状态与数据不一致
真正麻烦的不是存或读，而是每次用户输入、点击、跳转、刷新时，都要对同一份历史数据做「去重 → 截断 → 存储 → 渲染 → 绑定」这一整套动作；少一个环节，历史就断层或错位。
