用 localStorage 存搜索词并显示历史记录：trim去空格后判空且去重，存入数组并限制10条，JSON序列化保存；显示时用textContent防XSS；autocomplete="on"不等于历史功能，需手动实现点击填值+调用搜索函数。
怎么用 localStorage 存搜索词并显示历史记录
浏览器原生不保存搜索框历史，得自己存。最稳妥的方式是用 localStorage，它持久、同源、无需后端，适合大多数场景。
关键点不是“怎么存”，而是“怎么避免重复、怎么控制条数、怎么防止 XSS”。实操建议如下：
- 每次用户提交搜索（比如按回车或点搜索按钮），先
trim()去空格，再判断是否非空、是否和上一条不同，才推入数组 - 用一个数组存历史，比如
searchHistory，每次更新后调用localStorage.setItem('searchHistory', JSON.stringify(historyArray)) - 限制最多 10 条：插入前用
historyArray.unshift(newTerm)，再historyArray.splice(10) - 显示时别直接
innerHTML = ...，用textContent或手动转义，否则用户搜<script>alert(1)</script>就执行了
为什么 autocomplete="on" 不等于历史记录
很多人以为加个 autocomplete="on" 就能显示历史，其实不是。这是浏览器的表单自动填充机制，依赖的是 name 属性和已提交过的表单值，和你当前页面的搜索逻辑无关。
典型问题包括：
立即学习“前端免费学习笔记（深入）”；
- 换了个
name="q"→ 历史清空，因为浏览器按 name 区分字段 - 用了 POST 提交 → 大部分浏览器不记录 POST 表单的 autocomplete 值
- 用户清过浏览器表单数据 → 历史消失，且无法恢复
- 移动端 Safari 对
autocomplete支持弱，经常不触发
所以别依赖它做历史功能，只当辅助体验。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
点击历史项怎么自动填入搜索框并触发搜索
历史列表渲染出来后，每项要绑定点击行为，核心是两步：填值 + 触发搜索逻辑（不是模拟 submit，而是复用你原有的搜索函数）。
示例片段（假设搜索框 id="search-input"，搜索函数叫 doSearch()）：
<div class="history-item" data-term="react">react</div> <div class="history-item" data-term="vue">vue</div>
JS 中监听：
document.querySelectorAll('.history-item').forEach(el => {
el.addEventListener('click', () => {
const term = el.dataset.term;
document.getElementById('search-input').value = term;
doSearch(); // 而不是 el.closest('form').submit()
});
});
注意：不要用 form.submit()，容易绕过你的防抖、校验、loading 状态等逻辑。
要不要用 IndexedDB 替代 localStorage
一般不用。除非你有以下明确需求：
- 历史要支持模糊搜索（比如输入“re”就匹配“react”“redux”）——
localStorage只能全量读取后 JS 过滤，慢但够用；IndexedDB 可建索引 - 单条记录超 5MB（比如带缩略图或时间戳+来源页等结构化数据）——
localStorage通常限 5–10MB 总量，且是字符串存储 - 需要跨域同步（比如主站和子站共享历史）——这时得走后端，IndexedDB 也解决不了
绝大多数搜索框历史，localStorage 更轻、更稳、更易调试。复杂点在于去重逻辑和 DOM 更新时机，而不是存储本身。
