vue前端历史搜索

要实现前端历史搜索功能，可以借助浏览器提供的localStorage存储数据。具体实现步骤如下：

1. 在搜索框输入关键词后，点击搜索按钮或按下回车键时，将关键词存入localStorage中。

let keyword = document.getElementById('search-input').value;
if (keyword) {
  let history = localStorage.getItem('search-history') || '[]';
  history = JSON.parse(history);
  if (history.indexOf(keyword) === -1) {
    history.push(keyword);
    localStorage.setItem('search-history', JSON.stringify(history));
  }
}

2. 在页面加载时，从localStorage中读取搜索历史记录并展示在页面上。

let history = localStorage.getItem('search-history') || '[]';
history = JSON.parse(history);
let historyList = document.getElementById('history-list');
history.forEach((item) => {
  let li = document.createElement('li');
  li.innerText = item;
  historyList.appendChild(li);
});

3. 清空历史记录功能可以直接清空localStorage中的数据。

localStorage.removeItem('search-history');

以上是一个简单的前端历史搜索功能实现步骤，可以根据具体需求进行优化。