保存输入搜索历史

Question

我有输入和搜索按钮，我希望当我点击输入时显示我之前搜索过的值。 当我单击按钮在历史记录中保存新值时，我该怎么做？ 这是我尝试过但没有做任何事情的方法。 谢谢

HTML：

<input class="inp" type="text">
<button class="search"></button>

JS：

    let dd = document.querySelector('.inp').value;
    document.querySelector('.inp').name = dd;

Answer 1

HTML：

<input class="inp" type="text" list="searchdata">
<button class="search">Search</button>
<datalist id="searchdata"></datalist>

脚本：

var searchHistory = (localStorage.searchHistory) ? JSON.parse(localStorage.searchHistory) : [];
document.querySelector(".search").addEventListener("click", () => {
  searchHistory.push(document.querySelector(".inp").value);
  localStorage.searchHistory = JSON.stringify(searchHistory);
});
document.querySelector(".inp").addEventListener("focus", () => {
  var data = document.querySelector("datalist#searchdata");
  data.innerHTML = "";
  searchHistory.forEach((search) => {
    data.innerHTML = "<option>" + data.innerHTML;
    data.querySelector("option").innerText = search;
  });
});