local storage 사용

local storage?

: 브라우저에서 제공하는 데이터 저장소

여는 법

개발자 도구 > Application > Local storage

특징

• Key : Value 형태로 값이 저장됨.
• 문자 데이터만 저장 가능 (최대 5MB까지)
• 데이터가 반영구적으로 유지 (브라우저 청소하면 사라짐)

DB 없이도 임시로 저장해둘 수 있어서 개발할 때 사용할 수 있는 옵션

참고 : Session Storage

특징은 똑같은데
로컬 스토리지는 사이트 재접속해도 남아있는 반면,
세션 스토리지는 사이트 끄면 날아감
(휘발성 있는 데이터 저장할 때 사용 가능)

---

로컬 스토리지 데이터 조작

데이터 넣기

localStorage.setItem( 키 , 값 )

데이터 가져오기

localStorage.getItem( 키 )

데이터 빼기

localStorage.removeItem( 키 )

입력, 출력, 삭제는 있는데 수정하는 문법은 없다
그냥 빼서 수정한다음에 다시 넣으면 됨

세션스토리지도 사용법 똑같음. getItem setItem removeItem

object, array 자료 넣기

로컬스토리지에는 원래 object, array 이런 자료는 못담는다 (문자만 가능)

function App() {
  let obj = {
    name: 'kim'
  };
  localStorage.setItem('data', obj);

그래서 이렇게 넣어봐도

이렇게 오브젝트 자료가 깨진다

그래서 object/array 를 넣고 싶으면 JSON으로 변환한 다음에 넣어줘야함

array/object -> JSON 변환

JSON.stringify()

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

대신 꺼낼때도 JSON -> object/array 로 변환해 줘야 한다는 단점이 있음

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

  let 꺼낸것 = localStorage.getItem('data');
  console.log(꺼낸것);

그냥 출력해보면 이렇게 따옴표가 다 쳐져 있는 JSON 형태로 나옴
-> 오브젝트 형태가 아니기 때문에 .name 이런식으로 데이터를 꺼내쓸수가 없다

JSON -> array/object 변환

JSON.parse()