[React] localStorage로 데이터 저장하기

localStorage

브라우저가 가지고 있는 임시 저장 공간

 

새로고침을 하면 JS 파일들은 모두 처음부터 다시 읽어들이기 때문에 당연하게 모든 state의 데이터는 초기화 됨

state에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB에 저장하면 되는데 별도의 서버나 DB가 없다면 localStorage에 저장하는 방법이 있다.

localStorage는 브라우저에 몰래 정보를 저장할 때 사용할 수 있는 공간이다. 

 

localStorage 확인

크롬에서 개발자도구를 켜서 Application 탭에 들어가면 좌측 Storage 하위 목록인 Local Storage를 확인할 수 있다.

 

문법

// 데이터 추가
localStorage.setItem('키값', '데이터');
// 데이터 조회
localStorage.getItem('키값');
// 데이터 삭제
localStorage.removeItem('키값);

데이터는 key & value 형태로 저장된다.

 

객체나 배열 저장/조회하기

localStorage.setItem('키값', JSON.stringify({name: '이름', age: 13}));

localStorage는 텍스트 자료형만 저장 가능하기에 객체나 배열 자료형은 바로 저장이 불가능하다.

따라서 JSON 형태로 변환하여 저장해야 한다.

JSON.stringify() 라는 함수를 활용하여 JSON 형태로 변환 가능하다.

 

저장된 데이터를 꺼내면 JSON 형태 그대로 나오므로 다시 객체/배열로 변환이 필요하다.

JSON.parse() 함수를 사용하면 된다.

 

 

출처 : 

https://seoyun-is-connecting-the-dots.tistory.com/349

[React] localStorage 로 DB 없이 데이터 저장하기