用包裹搜索框和按钮并监听submit事件，统一触发performsearch()；历史存localstorage并加try...catch容错；所有入口归一化、去重截取10条、支持键盘操作。
搜索框怎么绑定回车提交和点击搜索按钮
回车和按钮必须触发同一段逻辑，否则历史记录容易不同步。常见错误是给 <input> 单独监听 keydown，但没阻止表单默认行为，导致页面刷新清空历史。
- 用
<form></form>包裹搜索框和按钮，监听submit事件——这是最稳的方式，天然兼容回车、点击、甚至语音输入等触发源 - 在事件处理函数里调用
event.preventDefault()，否则表单会跳转或刷新 - 获取搜索词用
inputElement.value.trim()，避免空格干扰后续去重和存储
历史记录存在哪？localStorage 是唯一可行选择
sessionStorage 刷新就丢，cookie 太小且随请求发出去，IndexedDB 对零起点太重。localStorage 简单、持久、容量够（通常 5–10MB），但要注意它只存字符串。
- 每次搜索后，用
JSON.stringify()把数组存进localStorage.setItem('searchHistory', ...) - 读取时必须用
JSON.parse()，且要包裹try...catch——用户可能手动删过 localStorage，或数据损坏 - 限制条数：建议最多存 10 条，插入新记录前先用
historyArray.filter(item => item !== newQuery)去重，再用slice(-10)截取
怎么让历史记录可点击又不重复提交
直接给每个历史项绑 click 事件没问题，但容易点两次——比如手快连击，或点击后又按回车。关键不是防抖，而是统一入口。
- 所有触发搜索的行为（历史项点击、回车、按钮）最终都调用同一个函数，比如
performSearch(query) - 这个函数开头加个守卫：如果
query为空或与当前输入框值一致，直接return - 点击历史项后，记得把值写回
input.value并聚焦，方便用户编辑或再次提交
样式和交互细节决定是否“像一个真实搜索页”
没有动画、没清空按钮、历史列表不滚动——这些都会让用户觉得“卡”或“不响应”。零起点不必做复杂 UI，但几个关键点不能省。
- 给搜索框加
autocomplete="off"，否则浏览器下拉会和你的历史记录打架 - 历史列表用
<ul></ul>+<li>，每项加tabindex="0"和role="button"，支持键盘操作 - 清空按钮放在输入框右侧，点击后清空 input 和 localStorage，并重绘历史列表——别只清 DOM
- 输入框获得焦点时，若历史非空，自动展开历史列表；失焦后延迟 200ms 再收起，避免鼠标移向列表时闪退
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
