利用LocalStorage实现搜索历史缓存方法

本文详解了如何用浏览器原生的 LocalStorage 轻松实现高效、可靠的搜索历史缓存功能：三步完成关键词存储（监听事件→去重限条→JSON序列化），页面刷新后自动恢复并渲染为可点击列表，支持一键回填、键盘导航、新词置顶与清空操作，同时兼顾敏感词过滤、多环境隔离及移动端兼容性等关键细节，让搜索历史真正成为提升用户体验的实用提效工具。

直接用 LocalStorage 存搜索关键词，页面刷新也不丢，点一下就能回填，比每次重输快得多。

存搜索词：简单三步搞定

用户输完搜完，立刻把关键词塞进 LocalStorage：

• 监听搜索框的 submit 或 blur 事件（比如按回车或失焦）
• 取当前输入值，去掉空格、去重、限制条数（建议最多 10 条）
• 用 JSON.stringify() 转成数组存进 localStorage.setItem('searchHistory', ...)

读历史记录：渲染成可点击列表

页面加载后，从 LocalStorage 拿数据，生成带点击功能的历史项：

• 用 JSON.parse(localStorage.getItem('searchHistory')) 读取，加 try...catch 防解析失败
• 遍历数组，拼 HTML 或用 DOM 方法插入
• xxx
• 每个按钮绑定点击事件：自动填入搜索框并触发搜索（不需手动回车）

优化体验：加点小细节更顺手

光能存能读还不够，用户操作更自然才叫“快”：

• 点击历史词时，聚焦到搜索框并把光标移到末尾（input.focus(); input.setSelectionRange(...)）
• 支持键盘上下键切换历史项，回车直接选中（需监听 keydown，维护当前高亮索引）
• 提供一键清空按钮，调用 localStorage.removeItem('searchHistory')
• 同个词多次搜索，新记录置顶（删除旧位置再 unshift 进数组）

注意边界：别让缓存变坑

LocalStorage 有容量限制（通常 5–10MB），但单个域名下一般够用；真正要防的是：

• 敏感词别存（如含手机号、订单号的搜索）——加白名单判断或统一过滤
• 不同环境（测试/生产）用不同 key 名，避免互相污染，比如 'searchHistory-prod'
• 移动端软键盘弹出时，点击历史词可能触发两次搜索（iOS 常见），加节流或禁用重复点击

不复杂但容易忽略。存得稳、读得快、用得顺，搜索历史就真成了提效小帮手。

好了，本文到此结束，带大家了解了《利用LocalStorage实现搜索历史缓存方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！