localStorage

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

문제

루틴을 생성 하고 페이지를 나간다거나 새로고침을 하면 모든게 초기화가 되어있었고 

이 문제는 수정이나 삭제에 대해서도 일어났다.

루틴을 생성, 수정, 삭제 하는 모든 부분에 있어서 이 로컬 스토리지 사용이 필요하다는 것을 알았다.

 

사용

get으로 데이터를 브라우저에 저장하고 이를 set으로 가져와서 다시 화면에 그려준다.

get, set을 사용할때 데이터는 string 형태로 변환시켜준다.

 

 

routine을 추가하는 부분에 대해서 예시를 들어보자면

const storage = localStorage.getItem('routines') || '[]';

이렇게 routines의 데이터를 저장해두고

const handleAddRoutine = (routine: Routine) => {
    const newRoutines = [...routines, routine];
    setRoutines(newRoutines);
    localStorage.setItem('routines', JSON.stringify(newRoutines));
    setNextId(routine.id + 1);
  };

newRoutine이 무엇인지 할당해주고 

이를 setRoutines를 사용해서 업데이트 해주고

이를 setItem을 사용해서 불러와준다.

데이터는 문자열이어야하기 때문에 JSON.stringify를 사용해준다.

 

return 부분에는

onAddRoutine={handleAddRoutine}

이렇게 사용해주면서 화면에 그려준다.