팀프로젝트 3일차

상세페이지에서 리뷰를 작성할 수 있는 UI를 구현해보려 한다. 작성자, 리뷰, 확인비밀번호를 입력하도록 구현하고 작성한 정보는 브라우저의 lacalStorage에 적재하도록 한다. 오늘 TIL에는 lacalStorage에 대해 정리해보려 한다.
자바스크립트로 웹개발을 하다보면 간단한 것이라도 데이터를 어딘가에는 저장해야 한다. 보통은 DB서버나 클라우드플랫폼에 저장하는데 저장해야 할 데이터가 별로 중요하지 않거나, 없어져도 되는 데이터라면 서버에 저장하는 것은 낭비일 수 있다. 이럴 때 브라우저 상에 데이터를 저장할 수 있는 기술이 웹스토리지이다.
localstorage는 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다. 기본적인 사용방법은 다음과 같다.

//데이터 저장하기
localStorage.setItem('key', 'value');

//데이터 가져오기
localStorage.getItem('key');

//데이터 삭제하기
localStorage.removeItem('key');

//모든 데이터 삭제하기
localStorage.clear();

//저장된 키,값 쌍의 갯수
localStorage.length;

localstorage는 오직 문자형(string) 데이터 타입만 지원한다. 그래서 다른 타입의 데이터를 저장하려고 하면 문제가 생긴다. 이럴 때는 JSON형태로 데이터를 읽고 쓰면 된다. localstorage에 쓸 데이터를 JSON형태로 직렬화하고, 읽은 데이터를 JSON형태로 역직렬화해주면 다시 원하는 데이터로 얻을 수 있다.