localStorage
새로고침 하면 모든 state 데이터는 리셋된다.
왜냐하면 새로고침 하면 브라우저는 html, css, js 파일들을 처음부터 다시 읽기 때문이다.
이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 된다.
서버나 DB 지식이 없다면 loaclStorage를 이용해도 된다.
유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간이다.
▲ 크롬 개발자 도구에서 Application 탭 들어가면 왼쪽에서 많은 저장 공간들을 볼 수 있다.
Local Stroage
- key : value 형태로 저장 가능
- 사이트마다 5MB 정도의 문자 데이터만 저장 가능
- 사이트를 재접속해도 남아 있음(브라우저 청소하면 삭제됨), 반영구적임
Session Storage
- Local Stroage랑 똑같은데 브라우저 끄면 삭제됨
localStorage 문법
js 파일 아무데서나 다음 문법을 쓰면 localStorage에 데이터 입출력을 할 수 있다.
localStorage.setItem('데이터이름', '데이터'); //데이터 추가
localStorage.getItem('데이터이름'); //데이터 읽기
localStorage.removeItem('데이터이름') //데이터 제거- sessionStorage를 이용하기 원할 경우 localStorage를 sessionStorage로 변경해서 사용한다.
localStorage에 array/object 자료 저장
문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수는 없다.
강제로 저장해 보면 문자로 바꿔서 저장해 주는데 그러면 array/object 자료가 깨져서 저장된다.
그래서 JSON은 문자 취급을 받기 때문에 array/object → JSON 이렇게 변환해서 저장하면 된다.
(JSON은 그냥 따옴표 친 array/object 자료이다.)
localStorage.setItem('obj', JSON.stringify({name:'kim'}) );JSON.stringify()라는 함수에 array/object를 집어 넣으면 그 자리에 JSON으로 변환된 걸 남겨 준다.
그래서 위처럼 코드를 짜면 저장 가능하다.
var a = localStorage.getItem('obj');
var b = JSON.parse(a)당연히 데이터를 다시 꺼내면 JSON이 나온다.
JSON → array/object로 변환하고 싶으면 JSON.parse()를 사용하면 된다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
