用 localstorage 实现搜索历史记录，核心是将清洗后的关键词存入本地并控制数量、去重和展示：提交时去空格、转小写、读取现有记录、去重后插入开头，超10条则截断；页面加载时读取渲染为按钮列表，支持点击填充与清空功能。
用 localStorage 实现搜索历史记录，核心是把用户输入的关键词存进浏览器本地，并控制数量、去重和展示逻辑——不依赖后端，轻量且实用。
保存搜索词：触发时机与格式处理
每次用户提交搜索（比如点击“搜索”按钮或按回车），先获取输入框的值，做基础清洗再存入 localStorage：
- 去掉首尾空格，过滤空字符串或纯空白字符
- 转为小写或保留原始大小写，保持一致性（推荐小写，便于后续去重）
- 使用
JSON.parse(localStorage.getItem('searchHistory')) || []读取现有记录 - 用
Array.prototype.unshift()把新词插到开头，保证最新搜索在最前
限制数量与自动去重
历史记录不宜无限增长，通常保留最近 10 条足够。同时避免重复词反复出现：
- 插入前先用
filter(item => item !== newKeyword)清掉已有相同项 - 存入后检查数组长度，超出上限就用
.slice(0, 10)截断 - 最后用
localStorage.setItem('searchHistory', JSON.stringify(history))写回
读取并渲染历史列表
页面加载或聚焦搜索框时，可展示历史记录供快速选择：
- 从 localStorage 读取数组，若解析失败则设为空数组
- 遍历数组生成
<li><button type="button">关键词</button></li>结构 - 每个按钮绑定点击事件：填充搜索框 + 触发搜索（或仅填充）
- 建议加一个「清空历史」按钮，调用
localStorage.removeItem('searchHistory')
注意兼容性与边界情况
localStorage 容量约 5MB，单个域名内足够；但需留意：
- 隐私模式下可能抛出 QuotaExceededError 或 SecurityError，可用 try/catch 包裹写入逻辑
- 不同浏览器对特殊字符（如 emoji、超长词）处理略有差异，存前建议简单校验长度（如 ≤ 50 字符）
- 如果用户手动清空 localStorage，历史自然消失——这是预期行为，无需额外同步
