原生js音乐播放器搜索历史

你想要实现一个原生 JavaScript 音乐播放器的搜索历史功能，对吧？那么，我可以给你一些思路：

1. 创建一个搜索历史数组，用来存储用户输入过的搜索关键词。

let searchHistory = [];

2. 每次用户进行搜索时，将搜索关键词加入到搜索历史数组中，并将搜索历史保存到本地存储中。可以使用 localStorage 来进行本地存储。

// 获取用户输入的搜索关键词
let keyword = document.getElementById('searchInput').value;
// 将搜索关键词加入到搜索历史数组中
searchHistory.push(keyword);
// 将搜索历史保存到本地存储中
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));

3. 在页面加载时，从本地存储中读取搜索历史，并将搜索历史显示在搜索框下方。可以使用 forEach 方法来遍历搜索历史数组，并将每个搜索关键词添加到搜索历史列表中。

// 从本地存储中读取搜索历史
searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
// 遍历搜索历史数组，将每个搜索关键词添加到搜索历史列表中
searchHistory.forEach(function(keyword) {
  let li = document.createElement('li');
  li.textContent = keyword;
  document.getElementById('searchHistoryList').appendChild(li);
});

4. 当用户点击搜索历史列表中的某个搜索关键词时，将该关键词填入搜索框中，并触发搜索事件。

// 给每个搜索历史列表项添加点击事件监听器
document.querySelectorAll('#searchHistoryList li').forEach(function(li) {
  li.addEventListener('click', function() {
    // 将搜索历史填入搜索框中
    document.getElementById('searchInput').value = li.textContent;
    // 触发搜索事件
    document.getElementById('searchBtn').click();
  });
});

以上就是一个简单的原生 JavaScript 音乐播放器搜索历史功能的实现思路，你可以根据自己的需要进行修改和扩展。