[React] Local Storage 이용해서 브라우저에 데이터 저장하기

내가 만든 간단한 Todo List 앱은 새로고침/재접속 시에 초기화 된다. 별도의 DB를 사용하지 않고 브라우저 상에서만 데이터가 처리되기 때문이다.

데이터를 기억하기 위해서는 서버에 데이터를 보내서 DB에 저장하거나, 브라우저가 가지고 있는 임시 저장 공간에 저장하는 방법이 있다.

별도의 서버가 필요하지 않은 프로젝트이고 사용할 데이터양이 많지 않으므로 Local Starage에 데이터를 저장해서 사용할 수 있도록 하였다.

Session Storage는 브라우저를 종료하면 데이터가 사라지는 휘발성 저장공간이다. Local Starage는 브라우저를 청소하지 않는 이상 사라지지 않는다. 브라우저마다 다르지만 약 5MB 정도의 텍스트를 저장할 수 있다.

Local Storage 사용하기

• 데이터 저장 방법

localStorage.setItem(‘Key’,’Value’)

• 데이터 출력 방법

localStorage.getItem(‘Key’)

• 데이터 삭제 방법

localStorage.removeItem(‘name’)

객체와 배열 저장하는 방법

Session Storage와 Local Starage는 텍스트만 저장할 수 있기 때문에 객체와 배열을 위 방법대로 저장하게 되면 문제가 발생한다. 이 현상을 막기 위해서는 객체와 배열의 데이터를 JSON 자료형으로 변경해 줄 필요가 있다.

• JSON 자료형으로 변경

JSON.stringify()

• 원래의 자료형으로 복원

JSON.parse()

프로젝트에 적용

1. 브라우저 Local Storage에서 데이터를 가져와 초기 할일 목록을 설정하는 함수를 설정

  useEffect(() => {
    const storedTodoList = JSON.parse(localStorage.getItem("todoList"));
    if (storedTodoList) {
      setTodoList(storedTodoList);
    }
  }, []);

2. 할일 목록이 변경될 때마다 Local Storage에 저장하는 함수 추가

  useEffect(() => {
    localStorage.setItem("todoList", JSON.stringify(todoList));
  }, [todoList]);

3. State를 사용하는 부분에서 Local Storage에서 가져오거나 저장하도록 수정하면 된다.

  const [todoList, setTodoList] = useState(
    JSON.parse(localStorage.getItem("todoList")) || []
  );

  // 저장 버튼 클릭 이벤트 처리
  const onSubmitHandler = function () {
    const newTodo = {
      id: todoList.length + 1,
      subtitle,
      todo,
      isDone: false,
    };

    setTodoList([...todoList, newTodo]);
    alert("저장 성공!");
    setSubtitle("");
    setTodo("");
  };

이제 페이지를 새로고치거나 브라우저를 재실행하더라도 기존의 데이터가 유지된다.