localstorage 更合适，因其关闭浏览器后仍保留搜索词；sessionstorage 会清空，不满足历史需求；需注意容量限制、同源共享、json 解析容错、条数限制及去重逻辑。
搜索历史用 localStorage 还是 sessionStorage？ localStorage 更合适，因为用户关闭浏览器后仍需保留最近几次搜索词。sessionStorage 一关就清空，不适合“历史”这个需求。但要注意：localStorage 容量有限（通常 5–10MB），不过存几十条短文本完全够用；它按域名隔离，同源页面可共享。
实际操作时建议：
- 用
localStorage.setItem('searchHistory', JSON.stringify(historyArray))写入 - 读取时先
try...catch，防止 JSON 解析失败（比如用户手动篡改了 localStorage） - 限制历史条数（如最多 10 条），插入新项前用
historyArray.unshift(newTerm)+historyArray.splice(10)
如何在输入框回车或点击搜索按钮时保存搜索词？
关键是捕获触发动作的时机，而不是等结果返回后再存——搜索失败也要记，否则历史会断层。常见错误是只在 fetch 成功回调里写入，导致网络失败时漏掉记录。
推荐做法：
- 监听
inputElement.addEventListener('submit', handler)（表单场景）或button.addEventListener('click', handler) - 在事件处理函数开头就提取
inputElement.value.trim()，非空才存 - 立即调用保存逻辑，不依赖异步结果
- 避免重复存相同词：可检查
historyArray[0] !== newTerm，或去重后保留原始顺序（用Array.from(new Set([...historyArray, newTerm])).slice(-10)）
怎么把历史列表渲染成可点击的标签并绑定搜索行为？
别用 innerHTML += ... 拼接，容易 XSS（如果历史词含 <script></script> 类内容）。应该用 document.createElement 或 textContent 确保安全。
实操要点：
- 遍历 historyArray，为每个词创建
span元素，设textContent而非innerHTML - 给每个
span绑定click事件，触发搜索（例如inputElement.value = term; form.submit()） - 加 CSS 类（如
search-history-item）方便样式控制，避免用行内 style - 空数组时显示 “暂无搜索历史”，别留白或报错
为什么搜索历史没更新或突然清空？几个典型坑
最常见的是未处理大小写或空格差异：用户搜 "react" 和 "React " 被当成两条；还有跨页面路径问题——如果 index.html 和 /search/index.html 是不同路径，localStorage 仍能共享，但若用了 iframe 或 Service Worker 缓存旧 JS，可能读到过期数据。
排查方向：
- 打开开发者工具 → Application → Local Storage，直接查看
searchHistory的值是否符合预期 - 检查是否在多个地方调用了
localStorage.clear()（尤其某些 UI 框架的“重置状态”逻辑） - 注意 Safari 的隐私模式下
localStorage会抛出QuotaExceededError，需兜底 try/catch 并降级为内存存储 - 修改历史数组后忘记重新渲染 DOM，或渲染逻辑被 Vue/React 的响应式机制绕过（纯 HTML 场景则无此问题）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
