React, localStorage

localStorage

새로고침하면 모든 state 데이터는 리셋됨

새로고침을 하면 브라우저는 Html, CSS, JS 파일들을 처음부터 다시 읽기 때문

리셋되는것을 원하지 않는다면 state 데이터를 서버로 보내서 DB에 저장하면 됨

서버나 DB 지식이 없다면 localStorage를 이용해도 됨

유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간

 

Local Storage는 브라우저를 청소하지 않는 이상 반영구적으로 Session Storage는 브라우저를 끄면 삭제됨

• key: value 형태로 저장
• 사이트마다 5MB 정도의 문자 데이터를 저장할 수 있음

 

localStorage문법

localStorage.setItem('데이터이름', '데이터');
localStorage.getItem('데이터이름');
localStorage.removeItem('데이터이름')

• setItem - 추가
• getItem - 읽기
• removeItem - 삭제

seesionStorage를 이용하기 원할경우 localStorage를 seesionStorage변경하여 입력

 

localStorage에 array/object 자료 저장

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

localStorage는 문자만 저장할 수 있는 공간이라 array/object를 저장할 수는 없음

JSON은 문자취급을 받아서 localStorage에 저장할수 있음

그래서 array/object -> JSON 이렇게 변환해서 저장해야 함

array/object를 JSON으로 변환하고 싶으면 JSON.stringify()로 변환

 

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

데이터를 읽어오면 JSON이 나오기때문에 원래 array/object로 변환하고 싶으면 JSON.parse()로 변환