[JS] localStorage에 배열로 값 쌓기

문제 : 로컬스토리지에 데이터를 배열의 형태로 쌓고 싶음 하지만 단순히 string으로 쌓임.

 

const toDoForm = document.querySelector("#todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector("#todo-list");

const toDos = [];

function saveToDos() {
  //   localStorage.setItem("todos", JSON.stringify(toDos));
  localStorage.setItem("todos", toDos);
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
}

function paintToDo(toDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = toDo;
  const deleteBtn = document.createElement("button");
  deleteBtn.innerText = "❌";
  deleteBtn.addEventListener("click", deleteToDo);
  li.appendChild(span);
  li.appendChild(deleteBtn);
  toDoList.appendChild(li);
}

function handleToDoSubmit(e) {
  e.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = "";
  toDos.push(newToDo);
  paintToDo(newToDo);
  saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

위와 같이 코드를 작성하였고, handleToDoSubmit 함수를 보면 toDos란 배열에 할일을 생성할때마다 그 값을 넣어주는 것을 알 수 있음.

하지만 이렇게 저장하게 되면 직접 localStorage 에서 확인해봤을 때 값들이 array안에서
string의 형태가 아닌 상태로 저장된다.
예) key: todos value: a,b,c

하지만 값들을 string의 형태로 toDos라는 array에 집어넣고 싶기 때문에 JSON.stringify() 라는 객체를 사용한다. 이 도구는 우리가 대입한 값을 알아서 string의 형태로 바꿔줄 것이다. 즉 배열 자체를 문자열로 바꿔서 넣어주는 것이다. "["a", "b", "c"]" 이렇게
예) key: todos value: ["a", "b", "c"]

 localStorage.setItem("todos", JSON.stringify(toDos));

이 코드를 통해 다음과 같이 배열로 localStorage에 값을 삽입해주는 것을 알 수 있다.

 

 

 

여기서 중요한 점 왜 JSON.stringify로 배열 전체를 string으로 만들어줬을까????

-> 그것은 바로 다시 불러올때 배열로 온전하게 불러오게 하기 위해서이다. 

그러기 위해서는 JSON.parse를 써줘야한다. 즉,

JSON.parse(localStorage.getItem("todos"));

위 코드를 통해 배열의 형태로 다시 localStorage에 저장된 todos 배열을 가져올 수 있다.