localStorage 사용하기

localStorage를 통해서 페이지가 새로 고침 되어도 브라우저에 값을 저장할 수 있다.

localStorage 객체는 단순한 key-value 저장소로 이루어져있다.

개발자 도구를 보면 로컬스토리지에 접근할 수 있으며,

입력한 값이 로컬 스토리지에 key-value형태로 저장된 것을 확인 할 수 있다.

사용 방법

 

추가

localStorage.setItem('myCat', 'Tom');

읽기

const cat = localStorage.getItem('myCat');

 

제거

localStorage.removeItem('myCat');

 

항목 전체 제거

localStorage.clear();

---

입력 폼에 값이 없다면 입력 폼을 계속 띄워준다.

만약 입력 폼을 통해 localstorage에 값이 저장되면 입력폼은 감춰주고 localstorage에 저장되어 있는 값을

텍스트로 출력해준다.