JavaScript 中怎么在 LocalStorage 中缓存用户的输入联想历史记录-js教程-PHP中文网

localstorage缓存联想历史的核心是合理存储、高效查询、自然使用：仅保存用户确认的关键词，自动去重并限存10条；用json序列化存取；输入时防抖并前缀匹配本地数组，按时间倒序返回前5条。

javascript 中怎么在 localstorage 中缓存用户的输入联想历史记录

在 LocalStorage 中缓存用户输入的联想历史记录，核心是：把用户每次输入的关键词（去重、限长）存为数组，每次输入时读取并匹配展示。关键不在“存”，而在“怎么存得合理、查得高效、用得自然”。

存什么？——只存有价值的关键词

别把每次输入都原样存下，容易膨胀、重复、无用。建议只保存用户明确“确认”或“回车提交”的关键词，或者在输入框失去焦点（blur）且内容非空时保存。

自动去重：存前先过滤掉已存在的项
限制长度：比如最多存 10 条，老的自动淘汰（用 Array.splice(0, 1) 从开头删）
清洗内容：去除首尾空格，转小写（可选，便于模糊匹配）

怎么存？——用 JSON 安全序列化

LocalStorage 只支持字符串，所以必须用 JSON.stringify() 存，JSON.parse() 读。直接赋值对象会变成 [object Object]，导致后续解析失败。

示例代码：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

// 保存一条新关键词
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));
}