标签已失效，无法用于搜索历史；它不生成 dom、不支持 js 操作，现代浏览器直接忽略；应改用 并手动实现 localstorage 存储与去重逻辑。

<isindex> 标签在现代浏览器中已完全失效，它不是实现搜索历史的可行路径，也不应出现在任何新项目中。

为什么 <isindex> 不能用作搜索历史载体

这个标签是 HTML 2.0 的遗留物，语义是“提示用户输入单行查询”，浏览器曾默认渲染为带提示文字的文本框，但它不生成 DOM 元素、不触发事件、无法绑定 JS、不能读写 value、也不支持 data 属性或 localStorage 关联。现代 Chrome/Firefox/Safari 渲染时仅当作未知标签忽略，或退化为纯文本。

常见误判现象：

• 写 <isindex prompt="搜索"> 后页面没反应 —— 实际是标签被静默丢弃
• 试图用 document.querySelector('isindex') 获取元素 → 返回 null
• 以为它会自动记录历史 —— 它连表单提交都不触发，更无 history 存储逻辑

<input type="search"> 才是正确起点

所有可控搜索历史必须基于可操作的 <input> 元素，type="search" 仅提供轻微样式差异（如清空按钮），关键在于它支持完整 DOM API 和事件流。

实操要点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须有明确 id 或 name（如 id="search-input"），否则 JS 无法稳定获取
• 监听 submit 事件（来自包裹它的 <form></form>）比监听 input 更可靠：避免频繁存空值或防抖干扰
• 不要依赖 autocomplete="on" 实现历史回显：它由浏览器控制，字段名需为 search、q 等白名单值，且用户必须真实提交过才生效

localStorage 存取必须手动做，没有捷径

浏览器不会把用户在 <input> 里输过的内容自动塞进 localStorage。每一步都得自己写：

• 读取：JSON.parse(localStorage.getItem('searchHistory') || '[]') —— || '[]' 防止解析 null 报错
• 去重判断：history.some(item => item.toLowerCase() === query.toLowerCase())，注意大小写和空格处理
• 写入前截断：history = [query, ...history.filter(item => item !== query)].slice(0, 10)，保证最新在前、总数≤10
• 写入：localStorage.setItem('searchHistory', JSON.stringify(history)) —— 必须字符串化，否则存的是 [object Object]

点击历史项后光标位置容易错乱

直接赋值 input.value = term 后，光标默认停在末尾。如果用户想修改而非全选重输，体验会断层。

补救做法（非必需但推荐）：

• 调用 input.focus() 后立刻加 input.setSelectionRange(0, term.length) 实现全选
• 若输入框绑了防抖搜索（如 300ms 延迟触发），需在点击历史时设临时标志 isFromHistory = true，让防抖逻辑跳过本次触发
• 避免在 click 回填后自动 form.submit() —— 用户可能只是想看看再改，不是立刻搜

真正难的不是存和读，而是边界处理：空输入、重复提交、跨标签页同步、localStorage 写满报错、IE 的同步阻塞……这些不会在 demo 里体现，但上线后第一个用户就会撞上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！