tmdb를 이용한 영화사이트 제작 중 n초 후 영화출력과 동시에 검색어가 자동저장되는 기능을 구현하기 위해 코드를 기록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./search.js"></script>
<title>연습</title>
</head>
<body>
<header></header>
<main>
<form>
<label for="search-input"></label>
<input id="search-input" class="search-input" list="history" type="text" />
<datalist id="history" class="search-datalist"> </datalist>
<button class="del-btn" type="button">검색기록삭제하는버튼</button>
</form>
</main>
<footer></footer>
</body>
</html>
let arr = localStorage.getItem("input") ? JSON.parse(localStorage.getItem("input")) : [];
let timeoutId;
document.querySelector(".search-input").addEventListener("input", (e) => {
let copy = [...arr];
clearTimeout(timeoutId);
if (arr.includes(document.querySelector(".search-input").value)) return false;
if (document.querySelector(".search-input").value == "") return false;
timeoutId = setTimeout(() => {
copy.push(e.target.value);
copy = copy.slice(0, 5);
localStorage.setItem("input", JSON.stringify(copy));
console.log(copy);
copy.forEach((v, i) => {
document.querySelector(".search-datalist").insertAdjacentHTML(
"beforeend",
`
<option>${v}</option>`
);
});
}, 1000);
});
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
});
document.querySelector(".del-btn").addEventListener("click", () => {
if (!confirm("검색기록을 삭제하시겠습니까?")) return;
localStorage.removeItem("input");
document.querySelector(".search-input").value = "";
document.querySelector("#history").innerHTML = "";
});
- 변수에 cleartimeout을위한 timeId 설정을 하고 input이벤트가 실행되면 cleartimeout과 settimeout을 실행
- localstorage를 이용해 검색어를 어레이에 저장
- submit이 별도로 필요없는 페이지라 페이지 내 버튼타입은 button으로 설정, submit이벤트는 preventdefault로 막음
- 삭제버튼을 누르면 input의 value값, localstrage값, datalist안에 기록된 html을 모두 비워준다