React.js - 웹 스토리지 이용하기

웹 스토리지 이용하기

 

 감정 일기장 기능 구현을 마치고, 웹 스토리지라는 것을 배웠다. 기존의 감정 일기장은 새로고침하면 데이터가 보존되지 않는다는 문제가 있었는데, 웹 스토리지라는 웹 브라우저의 내장 DB를 이용하면 쉽게 데이터를 저장하고 꺼내쓸 수 있다.

출처 : 한 입 크기로 잘라먹는 리액트

 

 웹 스토리지에는 크게 두 종류가 있다. 브라우저 탭 별로 데이터를 보관하는 SessionStorage,  사이트 주소별로 데이터를 보관하는 LocalStorage이다. 우리가 만들 감정 일기장은 창이 닫혀도 데이터가 보관되길 원하므로 LocalStorage를 이용한다. 사용 방법은 아주 간단한데, JS 함수를 이용하면 된다.

localStorage.setItem( "key", value );
localStorage.getItem( "key" );

 

이때 key 값은 원시타입(숫자나 문자열)이어야 한다. (사실 숫자를 입력해도 문자열로 변환 됨.)

 

 

 또한 웹 스토리지의 value 값으로는 오직 문자열만 전달할 수 있다. 그러므로 숫자나 불리언을 전달할 때는 String 형 변환을, 객체나 배열을 전달할 때는 JSON.stringify() 함수를 이용한다. 반대로 웹 스토리지에서 문자열을 받아와 객체로 변환하려면 JSON.parse() 함수를 사용하면 된다.

localStorage.setItem("key", JSON.stringify( 객체 or 배열 ));