js实现搜索历史记录

可以使用localStorage存储搜索历史记录，具体实现可以参考以下代码：

首先在HTML中添加一个搜索框和一个搜索历史记录列表：

<input type="text" id="searchBox">
<ul id="historyList"></ul>

然后在JavaScript中实现搜索历史记录的存储和展示：

// 获取搜索历史记录
function getHistory() {
  let history = localStorage.getItem('searchHistory');
  if (history) {
    return JSON.parse(history);
  } else {
    return [];
  }
}

// 添加搜索历史记录
function addHistory(keyword) {
  let history = getHistory();
  if (history.indexOf(keyword) === -1) {
    history.push(keyword);
    localStorage.setItem('searchHistory', JSON.stringify(history));
  }
}

// 清空搜索历史记录
function clearHistory() {
  localStorage.removeItem('searchHistory');
}

// 展示搜索历史记录
function showHistory() {
  let history = getHistory();
  let html = '';
  for (let i = history.length - 1; i >= 0; i--) {
    html += '<li>' + history[i] + '</li>';
  }
  document.querySelector('#historyList').innerHTML = html;
}

// 监听搜索框输入事件
document.querySelector('#searchBox').addEventListener('input', function() {
  let keyword = this.value.trim();
  if (keyword) {
    addHistory(keyword);
  }
});

// 页面加载时展示搜索历史记录
window.addEventListener('load', function() {
  showHistory();
});

// 清空搜索历史记录
document.querySelector('#clearBtn').addEventListener('click', function() {
  clearHistory();
  showHistory();
});

以上代码实现了搜索历史记录的存储、添加、清空和展示功能。当用户输入关键词时，将关键词添加到搜索历史记录中；页面加载时展示搜索历史记录；当用户点击清空按钮时，清空搜索历史记录并重新展示。