需用 localstorage 手动持久化搜索历史：提交后去重、截取前10条再存；渲染时动态创建按钮并绑定点击回填事件，清空时同步更新存储与dom；注意移动端适配、可访问性及边界情况处理。
如何用 localStorage 存储和读取搜索历史
浏览器原生不保存 input[type="search"] 的历史，除非显式用 localStorage 持久化。每次用户提交后，得手动把 value 推入数组、去重、截断（建议最多 10 条），再存回 localStorage。
常见错误是直接 push 后不检查重复项，导致“苹果”搜三次就出现三条；或没做长度限制，历史列表越滚越长，影响渲染性能。
- 存前先用
JSON.parse(localStorage.getItem('searchHistory') || '[]')读取已有数组 - 用
Array.filter(item => item !== newQuery)去重，再 unshift + splice(0, 10) - 写入时必须用
localStorage.setItem('searchHistory', JSON.stringify(historyArray))，否则下次读出来是字符串而非数组
动态渲染历史列表并绑定点击回填
不能靠 innerHTML += <button>xxx</button> 拼接，否则事件绑定失效或 XSS 风险。正确做法是用 document.createElement('button') 创建每个项，设 data-query 属性存原始值，再 attach click 事件。
容易忽略的点：点击后不仅要填入 input，还要调用 inputElement.focus()，否则光标没激活，用户还得手动点一下才能删改。
- 按钮需加
type="button"，避免意外触发表单提交 - 若搜索框有防抖逻辑（如
setTimeout延迟请求），历史点击应绕过防抖，直接赋值+聚焦 - 建议给按钮加
aria-label="搜索 ${query}"，提升可访问性
清空历史按钮的 DOM 更新同步问题
点了“清空”后只删了 localStorage 但没清空页面上的 <div id="history-list">，用户会以为没生效。必须两步一起做：删存储 + 清空容器子节点。
<p>更隐蔽的问题是：如果历史列表用了 <code>display: none 控制显隐，清空后忘了重置 visibility 或 opacity，会导致容器占位却不可见。
- 推荐用
historyContainer.innerHTML = ''或循环while (container.firstChild) container.removeChild(container.firstChild) - 清空后可顺手调用一次渲染函数（如
renderHistoryList()），确保状态一致 - 按钮本身建议加
disabled状态，防止连续点击触发多次清空
样式兼容性与移动端适配要点
input[type="search"] 在 iOS Safari 上自带右上角 × 清除按钮，但 Android Chrome 默认不显示；如果自己实现清除按钮（如带 X 图标的 <span class="clear"></span>），要监听 input 事件判断 value 长度是否为 0 来控制显隐。
历史列表在小屏上容易换行错乱或文字溢出，别只靠 white-space: nowrap —— 它会让长词条横向滚动，体验差。
- 用
text-overflow: ellipsis+overflow: hidden+max-width: 80vw控制单行显示 - 按钮 padding 建议用
rem或em，避免在高 DPI 屏上显得过小 - 点击区域至少保证
44px × 44px，符合移动端触控最小尺寸规范
