드림오구
article thumbnail

🌊 Local Storage

: localStrage는 웹 스토리지 객체로 브라우저 내 키-값 쌍으로 저장하도록 도와준다. localStorage에 저장한 자료는 페이지 프로토콜별로 구분된다. LocalStroage를 사용하면 페이지를 새로고침하거나 브라우저를 껐다 켜도 데이터가 사라지지 않고 남아있다.

 

사용법

myStorage = window.localStorage;
  • setItem(key, value)
    : 키에 데이터 추가
  • getItem(key)
    : 키로부터 데이터 읽기
  • removeItem(key)
  • : 키의 데이터 삭제
  • clear() 
    : 키 전체 삭제

setItem(key, value)

localStorage.setItem('datalist', data);

localStroage는 value값을 문자열만 사용 가능하여 value인 data를 문자열로 변환해야 한다. 값은 반드시 문자로 저장됨을 기억하자.

 

localStorage.setItem('datalist', JSON.stringfy(data));

솔로 프로젝트를 하며 헷갈리던 부분이다. 

여기서 'datalist'는 내가 임의로 지정해주는 키 값이다.

 

JSON.stringfy() 메서드는 객체를 문자열로 변환해준다.

JSON.stringfy 객체 -> 문자열
JSON.parse 문자열 -> 객체

 

getItem(key)

JSON.parse(localStorage.getItem('datalist'));

getItem으로 'datalist'에 저장된 데이터를 불러 올 수 있다.

 

 

removeItem(key)

removeItem('datalist')

해당 키에 있는 데이터를 모두 삭제한다.

 

 

clear()

localStorage.clear();

localStorage에 있는 모든 key, value를 삭제한다.

 

 

💡 주의점

중요 데이터는 저장하면 안된다.
profile

드림오구

@드림오구