用 localstorage 存搜索历史最直接：存字符串数组，去重限条（如10条），渲染时用事件委托回填并聚焦，删除用 splice 或 removeitem，不用 sessionstorage 因其关闭即失且多标签不共享。
怎么用 localStorage 存搜索词
浏览器里存搜索历史，最直接的方式就是 localStorage。它不随页面刷新丢失，也不需要后端，适合轻量记录。但要注意：它只能存字符串，且单个域名下容量通常只有 5–10MB（实际约 2–5MB 可用），别往里塞大对象。
实操建议：
- 每次用户提交搜索（比如点击搜索按钮或回车），先用
trim()去掉首尾空格，再判断是否为空——空词不存 - 用
JSON.parse(localStorage.getItem('searchHistory') || '[]')读取，避免解析失败报错 - 存入前检查重复：用
Array.prototype.indexOf()或some()判断是否已存在，避免堆叠相同关键词 - 限制条数，比如最多存 10 条：插入新词后用
historyArr.slice(-10)截取尾部
如何渲染历史列表并支持点击回填
把数组渲染成可点击的 <li> 很简单，但容易忽略两点：一是点击后要自动填充到搜索框并聚焦，二是要防止重复触发搜索（比如用户点历史词后又手动点了搜索按钮）。
实操建议：
- 用
forEach遍历历史数组，动态生成<li data-query="xxx">xxx</li>，不要用 innerHTML 拼接带事件的字符串 - 给容器（如
<ul id="history-list"></ul>）绑定事件委托，监听click，从e.target.dataset.query拿值 - 回填时调用
inputEl.value = query; inputEl.focus();，别忘了清空光标位置（可选：用inputEl.setSelectionRange(0, query.length)全选） - 如果搜索框绑了
form.submit，记得在回填后不自动提交；可加个标志位isFromHistory = true，submit 时跳过
怎么删除某条或清空全部历史
用户右键“删除”某条、或点击“清空全部”，背后都是对 localStorage 数组的 splice 或重置操作。难点不在逻辑，而在 UI 反馈和边界处理。
实操建议：
- 每条历史旁放一个
<button class="delete-btn" data-index="2">×</button>，点击时用dataset.index获取下标，再用splice(index, 1)删除 - 清空全部：直接
localStorage.removeItem('searchHistory')，别用localStorage.setItem('searchHistory', '[]')——后者仍占空间且可能干扰后续 JSON 解析 - 删除后立即重新渲染列表，别只改数组不更新 DOM；若用 innerHTML 渲染，删完记得重新赋值整个
innerHTML - 注意：
localStorage是同步 API，大量历史（如上千条）下频繁读写会卡 UI，日常搜索历史一般不会到这量级，但心里要有数
为什么不能用 sessionStorage 替代 localStorage
sessionStorage 看似也能存，但它在标签页关闭后就清空，用户换 tab 或刷新页面历史就没了——这违背“历史”的基本预期。另外，同一域名多个 tab 共享 localStorage，但 sessionStorage 是隔离的，导致 A tab 搜的词在 B tab 不可见。
真正要用 sessionStorage 的场景极少，比如临时表单草稿、多步流程中间状态。搜索历史这种明确要跨会话保留的数据，必须用 localStorage，没商量余地。
顺带提一句：别碰 cookies，体积小、自动发请求、还得管过期时间，纯属给自己加戏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
