localStorage는 상태 관리 시스템이다. 여기서 상태란, 변하는 데이터다.
localStorage의 문법
-
localStorage에 항목 추가
localStorage.setItem('key', 'value');localStorage는 기본적으로 key, value를 문자열으로 관리한다.
만약 value로 객체를 넣고 싶다면, 객체를 문자열로 관리할 수 있는 방법이 있는데
JSON.stringify를 사용하면 된다.또한, 객체로 넣은 것을 가져오고 싶을 때는
JSON.parse를 통해 가져오면 된다.JSON.stringify(): 자바스크립트 객체 → JSON 문자열
JSON.parse(): JSON 문자열 → 자바스크립트 객체
const store = { setLocalStorage(menu) { localStorage.setItem("menu", JSON.stringify(menu)); //key-value형태로 localStorage에 저장(그리고 반드시 string들어가야함) }, getLocalStorage() { return JSON.parse(localStorage.getItem("menu")); } } -
localStorage에 있는 항목 읽기
const tmp = localStorage.getItem('key'); //key에 해당하는 value값을 가져옴getItem을 했는데, 'key'가 없다면 null을 리턴한다.
localStorage 업데이트 후 → rendering