使用JS location实现搜索框历史记录功能

有一种常见的搜索框历史记录功能是，当用户在搜索框中输入关键字后，网站会记录这个关键字，并在搜索框下方显示搜索历史记录，用户可以快速选择历史记录中的关键字再次进行搜索。

实现这个功能可以使用JS中的location对象。以下是实现搜索框历史记录功能的详细步骤：

1. 监听搜索框的输入事件

首先，需要在搜索框上添加事件监听器，监听搜索框的输入事件。当用户在搜索框中输入文字时，就会触发这个事件。使用addEventListener方法实现：

const searchBox = document.querySelector('#searchBox');
searchBox.addEventListener('input', function(evt) {
  // 处理搜索框输入事件
});

2. 获取搜索框中的关键字

在搜索框输入事件的处理函数中，可以通过搜索框的value属性获取搜索框中的关键字。为了避免用户输入空格等无用字符，可以使用trim()方法去除字符串两端的空格。

const keyword = searchBox.value.trim();

3. 将关键字添加到搜索历史记录中

将用户输入的关键字添加到搜索历史记录中，可以使用location对象的pushState方法。pushState方法可以向历史记录中添加一条记录，并且不会导致页面的刷新或跳转。pushState方法有三个参数：

• state：一个JavaScript对象，表示这个历史记录的状态。
• title：新记录的标题，目前大多数浏览器都将其忽略。
• url：新记录的路径。

因为实现搜索框历史记录功能不需要跳转页面，所以title和url参数可以都设置为空字符串。state参数的值可以设置为一个包含关键字的对象，以便在之后的搜索历史记录中显示。

const newState = {keyword: keyword};
window.history.pushState(newState, '', '');

4. 监听popstate事件

当用户通过前进、后退按钮操作浏览器历史记录时，会触发popstate事件。可以监听这个事件，当它触发时更新搜索框的内容以及搜索结果列表。

window.addEventListener('popstate', function(evt) {
  if (evt.state && evt.state.keyword) {
    const keyword = evt.state.keyword;
    // 更新搜索框内容
    searchBox.value = keyword;
    // 更新搜索结果列表
    updateSearchResult(keyword);
  }
});

示例1：添加搜索历史记录

例如，用户在搜索框中输入"JavaScript"，则可以将它添加到搜索历史记录中：

searchBox.addEventListener('input', function(evt) {
  const keyword = searchBox.value.trim();
  const newState = {keyword: keyword};
  window.history.pushState(newState, '', '');
});

示例2：更新搜索结果

例如，用户通过前进、后退按钮操作浏览器历史记录，回到之前搜索过的关键字"JavaScript"。可以监听popstate事件，当它触发时更新搜索结果列表：

window.addEventListener('popstate', function(evt) {
  if (evt.state && evt.state.keyword) {
    const keyword = evt.state.keyword;
    // 更新搜索框内容
    searchBox.value = keyword;
    // 更新搜索结果列表
    updateSearchResult(keyword);
  }
});

以上是使用JS location实现搜索框历史记录功能的完整攻略，包括了通过pushState添加搜索历史记录，以及监听popstate事件更新搜索结果等过程。