使用 localstorage 实现搜索历史记录，核心是将关键词存为数组、去重置顶、限存10条并保留原始大小写；读取时需 try-catch 安全解析，支持清空与敏感词过滤，注意同源限制及无痕模式兼容性。
用 Web Storage（主要是 localStorage）实现搜索历史记录，核心是把关键词存成数组、控制数量、保持最新在前，刷新或关闭浏览器后依然存在。
保存关键词：去重 + 置顶 + 限10条
每次用户完成一次有效搜索（比如点击搜索按钮或按回车），就执行以下几步：
- 读取 localStorage 中已有的 history 数组，如 key 为 searchHistory；若无，则初始化为空数组
- 对输入词 trim() 去首尾空格，过滤掉空字符串或纯空白符
- 若该词已存在，先从数组中删除（保证唯一性）
- 用 unshift() 插入到数组开头，使最新搜索始终排最前
- 调用 splice(10) 截断，只保留前 10 项
- 用 JSON.stringify() 转为字符串，再 setItem 写入
读取并展示：安全解析 + 动态渲染
页面加载或搜索框获得焦点时，可拉出历史供点击复用：
- 用 getItem('searchHistory') 获取字符串值
- 包裹 try...catch 后再 JSON.parse()，避免因数据损坏导致脚本中断
- 遍历解析后的数组，生成 或 元素，点击即填入搜索框并触发搜索
- 添加“清空”按钮，调用 removeItem('searchHistory') 即可
大小写与敏感词处理
用户搜 “iPhone” 和 “iphone” 应视为同一词，但存储时需保留原始大小写：
- 去重比对前统一转小写（keyword.toLowerCase()），但插入数组时仍用原词
- 对含手机号、邮箱、身份证号等明显敏感字段的关键词，建议跳过存储，或加白名单规则过滤
- 避免直接存长文本或富格式内容，单个关键词控制在 50 字以内更稳妥
兼容与容错要点
localStorage 虽简单，但几个细节不注意容易出问题：
- IE8+ 支持，现代浏览器完全可用；但 Safari 无痕模式下可能禁用，需 try/catch fallback
- 同源限制严格：http://a.com 和 https://a.com 互不可见，域名、协议、端口必须完全一致
- 不要在 input 实时事件里频繁写入，推荐只在搜索提交或页面卸载（onunload / beforeunload）时保存
- 读取时若返回 null，应默认视为空数组，而不是直接调用 map() 或 forEach()，否则报错
