JavaScript 中怎么用 Set 实现搜索历史记录的唯一保存-js教程-PHP中文网

使用 set 管理搜索历史可自动去重、保持插入顺序，结合 localstorage 实现跨会话持久化；支持 o(1) 插入/查找、便捷增删查操作及数量限制。

javascript 中怎么用 set 实现搜索历史记录的唯一保存

用 Set 保存搜索历史，天然适合去重——它自动拒绝重复值，且插入、查找时间复杂度都是 O(1)，比数组去重更轻量高效。

初始化一个持久化的 Set 实例

搜索历史通常需要跨会话保留，所以得结合 localStorage 恢复数据；首次加载时从本地读取并还原为 Set：

let searchHistory = new Set();

// 从 localStorage 恢复（存的是 JSON 字符串数组）
const saved = localStorage.getItem('searchHistory');
if (saved) {
  try {
    JSON.parse(saved).forEach(item => searchHistory.add(item));
  } catch (e) {
    console.warn('解析历史记录失败，使用空记录');
  }
}

添加新搜索词并自动去重

每次用户提交搜索，直接调用 add() 即可。重复词不会被重复插入，也不影响已有顺序（Set 保持插入顺序）：

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

function addSearch(term) {
  if (!term?.trim()) return;
  const cleanTerm = term.trim();
  
  // 自动去重：如果已存在，add() 不做任何事
  searchHistory.add(cleanTerm);
  
  // 同步到 localStorage（可选：限制最多保存 20 条）
  const arr = Array.from(searchHistory);
  const toSave = arr.slice(-20); // 只保留最近 20 条
  localStorage.setItem('searchHistory', JSON.stringify(toSave));
}

读取和渲染历史列表

Set 可直接转为数组，方便遍历渲染。注意：不需要手动去重，也不用担心顺序错乱：

function getRecentSearches() {
  return Array.from(searchHistory).slice(-10); // 最近 10 条
}

// 示例：插入到 DOM
const listEl = document.getElementById('history-list');
listEl.innerHTML = getRecentSearches()
  .map(term => `

`) .join('');