개인 프로젝트(JavaScript) 1차 미션

point. 로컬스토리지에 데이터를 저장하고 이용하기

로컬스토리지에 대한 개념적 공부는 아래 링크에서 정리했다.
https://velog.io/@rabyeoljji/브라우저-저장소웹-스토리지-비교해보기

데이터 추가

: setItem( )

예)

localStorage.setItem(NAV_TOGGLE_STATE_KEY, "close");

데이터 읽기

: getItem( )

예)

localStorage.getItem(NAV_TOGGLE_STATE_KEY)

데이터 삭제하기

: removeItem( )

예)

localStorage.removeItem(NAV_TOGGLE_STATE_KEY)

(+) 추가

데이터 값으로 객체나 배열 저장하기

: JSON.stringify( )

예)

const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr);

localStorage.setItem('key', objString)

로컬스토리지 값 전체 삭제하기

: clear( )

예)

localStorage.clear()

자바스크립트로 진행한 첫 미션이었는데 최대한 실전처럼 해보려고 모듈화를 해서 나름 작성했지만, 미션 회고록 작성하면서 나중에 다시 보니까 그 사이에 또 배운게 많아서 코드를 엉망으로 작성했다는 느낌이 들었다ㅋㅋ큐ㅠ

아직 이벤트 다루는 것도 익숙하지 않고 로컬스토리지 개념도 익숙하지 않을 때라 하나하나 시간이 많이 들었지만 확실히 직접 코드를 작성해보는게 가장 좋은 훈련법이라는 것을 깨달았다.