현재 만들고 있는 웹 애플리케이션에서 검색창에 유저가 검색한 내용이 유효하면 다음에 검색창을 Focus 했을 때, 자동완성으로 띄어주려고 한다.
이것을 구현하기 위해 나는 LocalStorage를 사용하기로 하였다.
LocalStorage와 SessionStorage의 사용법은 동일하며, local <-> session만 변경해주면된다.
우선 기본적으로 웹 스토리지는 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.
기본적인 사용 방법은 다음과 같다.
localStorage.setItem("key", value);
// 데이터 쓰기
localStorage.getItem("key");
// 데이터 읽기
localStorage.removeItem("key");
// 키의 데이터 삭제
localStorage.clear();
// 모든 키의 데이터 삭제
이 때, key에 추가, 가져오기, 삭제를 할 때 key는 항상 동일해야 한다.
다음의 예제를 보면 쉽게 이해할 수 있다.
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
//html에서 form, input, ul
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
saveToDos();
}
function paintToDo(newTodo) {
const li = document.createElement("li");
li.id = newTodo.id;
const span = document.createElement("span");
span.innerText = newTodo.text;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodoObj);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}