应使用 localStorage 自行管理搜索历史而非依赖浏览器自动填充；通过 data-index 定位、splice() 删除、全量重绘列表并实时去重截断，确保增删同步更新存储与 DOM。
用 localStorage 存历史记录，别用 input 自己管
HTML 的 <input> 标签本身不保存历史，所谓“历史记录”其实是浏览器自动填充（autofill）或前端手动存的。想实现可删除的历史列表，必须自己管理数据源——localStorage 是最直接的选择。浏览器自带的地址栏下拉历史、表单自动补全无法编程删除某条，只能靠自己建一套。
点击列表项时删对应条目，关键在 data-index 和 splice()
渲染历史列表时，给每个 <li> 加 data-index 属性，值为它在数组里的下标；点击时读这个值，用 splice(index, 1) 删除，再重写 localStorage 并刷新 DOM。
常见错误：直接用 filter() 但没更新存储，或者删完没重新渲染列表，导致界面上“删了还显示”。
- 每次修改后必须调用
localStorage.setItem('history', JSON.stringify(newList)) - 避免用
innerHTML += <li>...拼接，改用listEl.innerHTML = newList.map(...).join('')全量重绘，防止事件监听丢失 - 如果历史项含特殊字符（如引号、尖括号），记得用
textContent赋值而非innerHTML防 XSS
input 输入时触发去重和截断，不是等提交才处理
用户每输一个字就该检查是否已存在、是否超长。用 input 事件（不是 change 或 blur），实时同步到历史数组头部，并限制最多存 10 条。
立即学习“前端免费学习笔记（深入）”；
典型疏漏：只在表单提交时存，结果用户输完关页面，新记录根本没进历史；或者没去重，同一搜索词反复出现。
- 先
array = array.filter(item => item !== newValue)去重 - 再
array.unshift(newValue)插入开头 - 最后
array = array.slice(0, 10)截断 - 注意空字符串、纯空白符要
trim()后判断，否则存一堆' '
删除按钮放列表内部比放 input 旁边更可靠
把删除操作绑定在每个历史项内部（比如右上角 × 按钮），比在 <input> 旁放一个“清空全部”按钮更符合真实需求——用户通常只想删某一条，而不是误点清空。
容易被忽略的细节：删除后焦点还在 input 上，但用户可能没意识到内容已变；如果用了 contenteditable 或自定义下拉，还要手动关闭浮层。
性能提示：历史项少于 50 条时，直接 DOM 操作没问题；超过这个量级，建议用虚拟滚动或分页，否则频繁重绘会卡顿。
