LocalStorage缓存联想历史的核心是合理存储、高效查询、自然使用：仅保存用户确认的关键词，自动去重并限存10条；用JSON序列化存取；输入时防抖并前缀匹配本地数组，按时间倒序返回前5条。
在 LocalStorage 中缓存用户输入的联想历史记录，核心是：把用户每次输入的关键词（去重、限长）存为数组，每次输入时读取并匹配展示。关键不在“存”，而在“怎么存得合理、查得高效、用得自然”。
存什么？——只存有价值的关键词
别把每次输入都原样存下，容易膨胀、重复、无用。建议只保存用户明确“确认”或“回车提交”的关键词，或者在输入框失去焦点（blur）且内容非空时保存。
- 自动去重：存前先过滤掉已存在的项
- 限制长度：比如最多存 10 条，老的自动淘汰（用
Array.splice(0, 1)从开头删） - 清洗内容：去除首尾空格，转小写（可选，便于模糊匹配）
怎么存？——用 JSON 安全序列化
LocalStorage 只支持字符串，所以必须用 JSON.stringify() 存，JSON.parse() 读。直接赋值对象会变成 [object Object]，导致后续解析失败。
示例代码：
立即学习“Java免费学习笔记（深入）”；
// 保存一条新关键词
function saveSearchHistory(keyword) {
const key = 'searchHistory';
let history = JSON.parse(localStorage.getItem(key) || '[]');
// 去重：忽略大小写和空格
const normalized = keyword.trim().toLowerCase();
history = history.filter(item => item.toLowerCase() !== normalized);
history.push(keyword.trim()); // 保留原始格式显示
if (history.length > 10) history = history.slice(-10); // 保留最新10条
localStorage.setItem(key, JSON.stringify(history));
}
怎么查？——前端模糊匹配，不依赖后端
联想不是搜索，是“输入即提示”。监听 input 事件，在本地数组中做前缀匹配（或包含匹配），返回前 5 条最相关的结果即可。
- 推荐用
String.startsWith()做前缀匹配（更符合“联想”直觉） - 若需更宽松，可用
includes()或正则new RegExp(keyword, 'i') - 匹配结果按“最新出现优先”排序（数组本身就是按时间倒序存的，直接 slice 即可）
怎么用？——和输入框联动，体验顺滑
绑定 input 事件获取当前值，调用匹配函数，渲染下拉列表；点击/回车时触发选择，并再次调用 saveSearchHistory() 记录本次行为。
注意两个细节：
- 防抖：避免每敲一个字都查一次（延迟 200ms 再执行匹配）
- 清空逻辑：用户清空输入框时，联想列表应隐藏，但历史记录保留在 LocalStorage 中
不复杂但容易忽略：localStorage 没有失效机制，也不加密，敏感词（如密码、手机号）绝不能存。只用于非敏感、提升体验的场景，比如搜索关键词、常用地址片段、编辑器最近打开的文件名。
