[React] localStorage 값 저장하고 불러오기

 

 localStorage 값 저장하기

localStorage에 데이터 값을 담으면 페이지를 refresh 해도 데이터가 계속 남아 있다.

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

Window.localStorage - Web API | MDN

리액트의 이벤트핸들러에서 setData시 localStorage.setItem을 이용해 동일하게 값을 담아주면 된다.

객체나 배열을 저장해줄시에는 JSON.stringify를 이용해서 텍스트로 변환시켜준 후에 저장해주면 된다.

Application-Storage-Local Storage를 확인해보면 JSON.stringify없이 저장해둔 데이터는 [Object Object]와 같이 저장되는 것을 확인할 수 있다.

 

 localStorage 값 불러오기

값을 불러올 때는 useState 기본값에 넣어주면 된다. 이때 JSON.stringify로 객체를 string으로 변환해준 것을 다시 객체로 변환해주기 위해 JSON.parse를 이용한다.