로컬스토리지 사용법

<갑자기 왠 로컬스토리지?>

브라우저를 새로고침하면 모든 state 데이터는 리셋이 된다.

왜냐면 새로고침하면 브라우저는 html css js 파일들을 처음부터 다시 읽기 때문이다.

이 문제를 해결하려면 state 데이터를 서버로 보내서 DB에 저장하면 되는데,

서버나 DB 지식이 없다면 ‘로컬스토리지’를 이용해도 된다.

<접근 방법>

💡 F12(개발자 도구) → Application 탭

<특징>

⚡ 사이트마다 5MB 정도의 문자 데이터를 저장할 수 있다.

⚡ object 자료랑 비슷하게 key/value 형태로 저장한다.

⚡ 유저가 브라우저 청소를 하지 않는 한 영구적으로 남아 있다.

<로컬 스토리지 문법도 있다고?!>

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

❗단, 문자만 저장할 수 있다. 숫자를 입력해서 저장해도 문자로 변환되어서 저장된다.

<로컬 스토리지에 있는 데이터를 수정하려면?>

1. 데이터를 꺼낸다
2. 수정한다.
3. 다시 집어 넣는다.

<가끔가다 array/object를 저장하고 싶을때는..?>

먼저 JSON을 알아야 한다.

• JSON 이란?
  문자로 바꿔주는 역할을 한다.

let obj = {name : "kim"}
localStorage.setItem('data', JSON.stringify(obj))
// 문자로 변경된 obj를 로컬스토리지에 저장했다.
JSON.parse(localStorage.getItem('data'))
// JSON.parse는 문자를 array/object 형태로 변환해주는 함수다.
// 문자인 'data'를 가져와서 array/object로 변환해주었다. 

출처. 코딩애플