JavaScript LocalStorage 사용법

현재 만들고 있는 웹 애플리케이션에서 검색창에 유저가 검색한 내용이 유효하면 다음에 검색창을 Focus 했을 때, 자동완성으로 띄어주려고 한다.

이것을 구현하기 위해 나는 LocalStorage를 사용하기로 하였다.

LocalStorage와 SessionStorage의 사용법은 동일하며, local <-> session만 변경해주면된다.

우선 기본적으로 웹 스토리지는 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.

기본적인 사용 방법은 다음과 같다.

localStorage.setItem("key", value);
// 데이터 쓰기

localStorage.getItem("key");
// 데이터 읽기

localStorage.removeItem("key");
// 키의 데이터 삭제

localStorage.clear();
// 모든 키의 데이터 삭제

이 때, key에 추가, 가져오기, 삭제를 할 때 key는 항상 동일해야 한다.
다음의 예제를 보면 쉽게 이해할 수 있다.

#JavaScript

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);
}