HTML5中用localStorage实现搜索历史记录与点击回显：先去重并限制数量保存关键词，再动态渲染带data-query属性的按钮列表，点击时填入搜索框并聚焦，支持清空与回车搜索。
在HTML5中实现搜索历史记录并支持点击回显，核心是利用 localStorage 持久化保存关键词，配合 DOM 操作动态渲染和绑定点击事件。无需后端，纯前端即可完成，且兼容所有现代浏览器。
一、用 localStorage 存储和读取搜索历史
localStorage 适合长期保存用户本地行为数据，每次搜索后将词条去重存入数组，再整体写入；读取时直接解析 JSON 字符串。
- 每次提交搜索前，先从 localStorage 获取已有历史（如 key 为
searchHistory），若无则初始化为空数组 - 检查新词条是否已存在，避免重复（建议统一小写 + trim 处理）
- 将新词条 unshift 到数组头部，保持最新在前；然后限制长度（如最多 10 条），再存回 localStorage
二、动态生成历史列表并绑定点击事件
用一个容器元素（如 <div id="history-list">）承载历史项，每条用 <code><button></button> 或 <span></span> 包裹，便于样式控制和事件响应。
- 遍历历史数组，拼接 HTML 字符串或使用
document.createElement动态创建节点 - 为每个历史项设置
data-query属性存储原始词条，方便后续读取 - 给每个元素绑定
click事件，触发时将词条填入搜索框并自动聚焦
三、搜索框回显与交互优化
点击历史项后不仅要填入输入框，还应支持回车直接搜索、清空历史等基础体验。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 填入词条后调用
inputElement.value = query; inputElement.focus(); - 可监听搜索框的
keydown事件，按 Enter 键时执行实际搜索逻辑 - 提供“清空历史”按钮，点击后清除 localStorage 对应项并刷新列表
- 注意：若搜索框有防抖或自动补全逻辑，需确保历史点击不被误拦截
四、简单示例代码结构（可直接嵌入页面）
以下为精简可用的核心逻辑片段：
<input type="text" id="search-input" placeholder="请输入关键词">
<div id="history-list"></div>
<button id="clear-history">清空历史</button>
<script>
const input = document.getElementById('search-input');
const historyList = document.getElementById('history-list');
const clearBtn = document.getElementById('clear-history');
function loadHistory() {
const hist = JSON.parse(localStorage.getItem('searchHistory') || '[]');
return Array.isArray(hist) ? hist : [];
}
function saveHistory(query) {
let hist = loadHistory();
const cleanQuery = query.trim();
if (!cleanQuery) return;
// 去重（忽略大小写）
hist = hist.filter(q => q.toLowerCase() !== cleanQuery.toLowerCase());
hist.unshift(cleanQuery);
hist = hist.slice(0, 10); // 限制最多10条
localStorage.setItem('searchHistory', JSON.stringify(hist));
}
function renderHistory() {
const hist = loadHistory();
historyList.innerHTML = hist.length
? hist.map(q => `<button type="button" data-query="${q}">${q}</button>`).join('')
: '<small>暂无搜索历史</small>';
// 绑定点击事件（委托更优，但简单场景可直接循环绑定）
historyList.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', () => {
input.value = btn.dataset.query;
input.focus();
// 可选：触发一次搜索，或由用户手动回车
});
});
}
clearBtn.addEventListener('click', () => {
localStorage.removeItem('searchHistory');
renderHistory();
});
// 示例：表单提交或按钮点击时保存
document.querySelector('form')?.addEventListener('submit', e => {
e.preventDefault();
saveHistory(input.value);
renderHistory();
// 此处可继续执行搜索逻辑...
});
renderHistory();
</script>
