localStorage 사용하기

1. localStorage 사용 방법

프로젝트를 만들 때 브라우저에서 확인하면 새로고침할 때 데이터가 리셋된다.
브라우저는 새로고침하면 html, css, js파일을 처음부터 다시 읽기 때문이다.
새로고침해도 데이터를 그대로 보관하고 싶다면 서버로 보내서 DB에 저장하면 된다.
서버가 없는 경우 localStorage를 이용해 저장하면 된다.

localStorage 특징
1. 크롬 개발자도구에서 Application 탭에 들어가면 localStorage를 볼 수 있다.
2. 사이트마다 5MB 정도의 문자 데이터를 저장할 수 있다.
3. key/value 형태로 저장한다.
4. 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있다.
5. Session Storage도 비슷한 역할을 하지만 브라우저를 끄면 데이터가 삭제된다는 차이가 있다.

2. localStorage 문법

localStorage.setItem('데이터이름', '데이터'); // 데이터 추가하기
localStorage.getItem('데이터이름'); // 데이터 읽기
localStorage.removeItem('데이터이름') // 데이터 삭제하기

3. array/object 자료를 저장하는 방법

localStorage는 문자형 자료만 저장할 수 있다. array/object 자료를 저장하려면 JSON 형태로 변환해서 저장해줘야 한다. JSON은 문자 취급하기 때문이다.

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );

이렇게 저장하면 object형 자료도 깨지지 않고 저장된다.
단점은 JSON 형식으로 저장했기 때문에 데이터를 꺼내고 JSON형식이다.
다시 object형식으로 바꿔주어야 한다.

let a = localStorage.getItem('obj');
let b = JSON.parse(a)

JSON.parse()를 이용하면 array/object 자료로 변환할 수 있다.