localStorage是HTML5提供的一种存储数据的方式，可以将数据存储在浏览器的本地存储中。在制作历史搜索记录功能时，可以使用localStorage来保存用户的搜索记录，方便用户以后再次搜索相同的内容时能够快速找到历史记录。

使用localStorage来制作历史搜索记录功能需要以下几个步骤：

1. 判断浏览器是否支持localStorage。可以使用以下的JavaScript代码进行判断：

``` if (typeof(Storage) !== "undefined") { // 支持localStorage } else { // 不支持localStorage } ```

2. 创建一个函数来保存用户的搜索记录。可以使用以下的JavaScript代码：

``` function saveSearchRecord(searchTerm) { // 获取之前保存的搜索记录 var searchRecords = localStorage.getItem("searchRecords"); // 将搜索记录转换为数组 searchRecords = searchRecords ? JSON.parse(searchRecords) : []; // 将当前搜索记录添加到数组开头 searchRecords.unshift(searchTerm); // 只保存最近的5条记录 if (searchRecords.length > 5) { searchRecords.pop(); } // 将修改后的搜索记录保存到localStorage中 localStorage.setItem("searchRecords", JSON.stringify(searchRecords)); } ```

在这个函数中，首先获取之前保存的搜索记录，并将其转换为数组。然后将当前搜索记录添加到数组的开头，并判断数组的长度，如果超过5条记录则删除最后一条记录。最后将修改后的搜索记录保存到localStorage中。

3. 创建一个函数来获取用户的搜索记录。可以使用以下的JavaScript代码：

``` function getSearchRecords() { // 获取保存的搜索记录 var searchRecords = localStorage.getItem("searchRecords"); // 将搜索记录转换为数组 searchRecords = searchRecords ? JSON.parse(searchRecords) : []; // 返回搜索记录数组 return searchRecords; } ```

在这个函数中，首先获取保存的搜索记录，并将其转换为数组。然后返回搜索记录数组。

4. 在页面上使用这两个函数来保存和获取搜索记录。

在搜索框的提交事件中调用保存搜索记录的函数，将搜索框中的内容作为参数传递给函数：

``` var searchForm = document.getElementById("search-form"); searchForm.addEventListener("submit", function(event) { event.preventDefault(); var searchTerm = document.getElementById("search-term").value; saveSearchRecord(searchTerm); // 进行搜索操作 }); ```

在搜索结果页面中，获取搜索记录，并将其显示在页面上：

``` var searchRecords = getSearchRecords(); var searchRecordList = document.getElementById("search-record-list");

for (var i = 0; i < searchRecords.length; i++) { var searchRecord = searchRecords[i]; var searchRecordItem = document.createElement("li"); searchRecordItem.textContent = searchRecord; searchRecordList.appendChild(searchRecordItem); } ```

在这段代码中，首先获取搜索记录，并将其保存在一个变量中。然后获取显示搜索记录的列表，并在列表中添加每个搜索记录的项。

这样，就可以使用localStorage来制作历史搜索记录功能了。用户搜索时，会将搜索记录保存到localStorage中，然后在搜索结果页面中，将搜索记录显示出来，方便用户查看历史记录。