零起点HTML搭建带历史记录的搜索页

用<form>包裹搜索框和按钮并监听submit事件，统一触发performSearch()；历史存localStorage并加try...catch容错；所有入口归一化、去重截取10条、支持键盘操作。

搜索框怎么绑定回车提交和点击搜索按钮

回车和按钮必须触发同一段逻辑，否则历史记录容易不同步。常见错误是给 <input> 单独监听 keydown，但没阻止表单默认行为，导致页面刷新清空历史。

1. 用 <form> 包裹搜索框和按钮，监听 submit 事件——这是最稳的方式，天然兼容回车、点击、甚至语音输入等触发源
2. 在事件处理函数里调用 event.preventDefault()，否则表单会跳转或刷新
3. 获取搜索词用 inputElement.value.trim()，避免空格干扰后续去重和存储

历史记录存在哪？localStorage 是唯一可行选择

sessionStorage 刷新就丢，cookie 太小且随请求发出去，IndexedDB 对零起点太重。localStorage 简单、持久、容量够（通常 5–10MB），但要注意它只存字符串。

1. 每次搜索后，用 JSON.stringify() 把数组存进 localStorage.setItem('searchHistory', ...)
2. 读取时必须用 JSON.parse()，且要包裹 try...catch——用户可能手动删过 localStorage，或数据损坏
3. 限制条数：建议最多存 10 条，插入新记录前先用 historyArray.filter(item => item !== newQuery) 去重，再用 slice(-10) 截取

怎么让历史记录可点击又不重复提交

直接给每个历史项绑 click 事件没问题，但容易点两次——比如手快连击，或点击后又按回车。关键不是防抖，而是统一入口。

1. 所有触发搜索的行为（历史项点击、回车、按钮）最终都调用同一个函数，比如 performSearch(query)
2. 这个函数开头加个守卫：如果 query 为空或与当前输入框值一致，直接 return
3. 点击历史项后，记得把值写回 input.value 并聚焦，方便用户编辑或再次提交

样式和交互细节决定是否“像一个真实搜索页”

没有动画、没清空按钮、历史列表不滚动——这些都会让用户觉得“卡”或“不响应”。零起点不必做复杂 UI，但几个关键点不能省。

1. 给搜索框加 autocomplete="off"，否则浏览器下拉会和你的历史记录打架
2. 历史列表用 <ul> + <li>，每项加 tabindex="0" 和 role="button"，支持键盘操作
3. 清空按钮放在输入框右侧，点击后清空 input 和 localStorage，并重绘历史列表——别只清 DOM
4. 输入框获得焦点时，若历史非空，自动展开历史列表；失焦后延迟 200ms 再收起，避免鼠标移向列表时闪退

历史记录的同步时机、localStorage 的异常容错、以及所有搜索入口的归一化处理，这三处最容易被跳过。写完先手动删一次 localStorage，再搜几次，看会不会报错或漏存——这才是真跑通。