LocalStorage 实现搜索历史记录的添加与去重展示，核心在于：每次新增搜索词时先读取已有记录，过滤重复项，再插入新词并限制数量，最后写回 LocalStorage。
添加搜索词并自动去重
每次用户提交搜索后，获取当前搜索关键词，从 LocalStorage 读取已有的 history 数组（若不存在则初始化为空数组），用 filter 或 includes 判断是否已存在，不存在才 push 进去。
- 使用
JSON.parse(localStorage.getItem('searchHistory') || '[]')安全读取数组 - 用
!history.includes(keyword)判断是否重复（注意大小写敏感，如需忽略可统一转小写） - 去重后直接
unshift(keyword)插入开头，便于最新在前
限制历史条数并保持顺序
历史记录不宜无限增长，通常保留最近 10 条。添加完新词后，截取数组前 N 项即可。
- 例如：
history = history.slice(0, 10) - 避免用
splice修改原数组后再 slice，推荐创建新数组更清晰 - 写入前确保是纯字符串数组，避免意外存入对象或 undefined
渲染到页面并支持点击跳转
读取 history 后遍历生成 DOM 元素，绑定点击事件触发搜索或跳转。注意防止 XSS，对 keyword 做基础转义或用 textContent 设置文本。
- 用
element.textContent = item替代innerHTML防止脚本注入 - 为每个历史项添加 data-keyword 属性，方便事件中取值
- 可加「清空」按钮，调用
localStorage.removeItem('searchHistory')
完整简易示例代码片段
以下是一个可直接嵌入项目的轻量实现：
立即学习“Java免费学习笔记（深入）”；
// 添加搜索词
function addSearchHistory(keyword) {
if (!keyword?.trim()) return;
let history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
const normalized = keyword.trim();
if (!history.includes(normalized)) {
history.unshift(normalized);
history = history.slice(0, 10);
localStorage.setItem('searchHistory', JSON.stringify(history));
}
}
// 渲染历史列表
function renderSearchHistory(container) {
const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
container.innerHTML = '';
history.forEach(item => {
const el = document.createElement('div');
el.className = 'history-item';
el.textContent = item;
el.addEventListener('click', () => {
// 触发搜索或跳转逻辑
performSearch(item);
});
container.appendChild(el);
});
}
