用 localStorage 存搜索历史词，每次存入前去重并截取最近5条，点击历史词自动填值并触发搜索，确保可访问性与边界逻辑对齐。
搜索框怎么存历史词又不刷页面
直接用 localStorage 存，别碰 Cookie 或后端——轻量场景下它最稳，关浏览器也不丢。每次用户输完按回车或点搜索，就把 searchTerm 推进数组，再用 Set 去重、截取最近 5 条，最后 JSON.stringify 存进去。别用 sessionStorage，它关 tab 就清空，用户刚搜完想点历史词，结果没了。
常见错误：直接 push 不去重，历史列表越用越长；或者每次存整个数组但没做长度限制，存了几百条拖慢读取。
- 存前先读旧数据：
JSON.parse(localStorage.getItem('searchHistory') || '[]') - 去重用
[...new Set([...old, newTerm])]，比 filter 简洁 - 只留最新 5 条：
history.slice(-5)，别用splice(0, history.length - 5)那种易错写法
历史词点击后怎么自动填进输入框并触发搜索
历史词是 <button></button> 不是 <a></a>，避免默认跳转；绑定 click 后直接赋值 input.value，再手动调 form.submit() 或触发自定义搜索函数。别用 input.dispatchEvent(new Event('input')) 模拟输入——它不会触发你绑在 submit 上的逻辑，纯属多此一举。
容易踩坑：点了历史词，输入框填了但没搜，因为没主动调搜索动作；或者用了 location.search 拼接跳转，导致页面刷新丢失当前状态。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 按钮加
type="button"，防误提交 - 填值后立刻 focus 输入框：
input.focus()，方便用户删改 - 如果用事件委托，确保 delegate target 是按钮，不是外层
div
怎么让历史词不重复显示还保持顺序
顺序靠插入时机保证，不是靠渲染时排序——新搜的永远在末尾，取 slice(-5) 自然就是最新五条。去重必须在存的时候做，不能等到渲染时用 filter((v, i) => history.indexOf(v) === i)，那样会破坏顺序，且每次渲染都遍历浪费性能。
示例片段：
const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');<br>const updated = [...new Set([...history, term])].slice(-5);<br>localStorage.setItem('searchHistory', JSON.stringify(updated));
-
Set构造时按插入顺序保留唯一值，符合预期 - 不要用
Array.from(new Set(...))，多一层转换没必要 - 如果想支持大小写不敏感去重，得先统一转小写再塞
Set，但需额外存原始大小写用于显示
样式极简但要点亮当前 hover 和选中态
就用原生 :hover 和 :focus-within，别引入任何 CSS 框架类名。历史词容器加 tabindex="0"，键盘用户能用 Tab 进入、方向键切换、回车触发——这点常被忽略，但 WCAG 至少要求基础可访问性。
别给按钮设 outline: none 除非同时提供其他焦点样式，否则键盘操作时完全看不到焦点在哪。
- 按钮 hover 背景用
#f5f5f5，比默认蓝更柔和 - 输入框获得焦点时，历史区用
opacity: 1显式显示（默认可设opacity: 0.95避免干扰） - 历史词太多时用
max-height: 200px+overflow-y: auto，别让它撑开布局
实际用起来，最麻烦的不是代码，是决定“搜空格算不算一次有效搜索”和“用户连续输错三次要不要清空历史”——这些边界逻辑得跟产品对齐，代码本身真就二十来行。
