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

要实现原生js音乐播放器搜索历史，可以使用localStorage来存储搜索历史记录，并结合DOM操作动态生成历史记录。

下面是一个简单的示例代码：

HTML部分：

<input type="text" id="search-input">
<button id="search-btn">搜索</button>
<div id="history-list"></div>

JavaScript部分：

var searchInput = document.getElementById('search-input');
var searchBtn = document.getElementById('search-btn');
var historyList = document.getElementById('history-list');

// 读取localStorage中的搜索历史记录
var searchHistory = localStorage.getItem('searchHistory');
if(searchHistory) {
  searchHistory = JSON.parse(searchHistory);
  renderHistoryList(searchHistory);
} else {
  searchHistory = [];
}

// 监听搜索按钮点击事件
searchBtn.addEventListener('click', function() {
  var keyword = searchInput.value.trim();
  if(keyword) {
    addToHistory(keyword);
    // TODO: 执行搜索操作
  }
});

// 添加搜索历史记录
function addToHistory(keyword) {
  // 去重
  if(searchHistory.indexOf(keyword) === -1) {
    searchHistory.push(keyword);
    localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
    renderHistoryList(searchHistory);
  }
}

// 渲染搜索历史记录列表
function renderHistoryList(list) {
  historyList.innerHTML = '';
  list.forEach(function(item) {
    var li = document.createElement('li');
    li.textContent = item;
    li.addEventListener('click', function() {
      searchInput.value = item;
      // TODO: 执行搜索操作
    });
    historyList.appendChild(li);
  });
}

以上代码会在页面加载时读取localStorage中的搜索历史记录，并将其渲染到页面上。当用户在搜索框中输入关键词并点击搜索按钮时，会将搜索关键词添加到搜索历史记录中，并将新的搜索历史记录渲染到页面上。用户点击某个历史记录时，会将该历史记录的内容填充到搜索框中，并执行搜索操作。