🌊 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를 삭제한다.
💡 주의점
중요 데이터는 저장하면 안된다.
'🐣 STUDY > Java Script' 카테고리의 다른 글
🌊 [javascript] 클래스와 인스턴스 (2) | 2023.03.15 |
---|---|
🌊 [javascript] 함수 (1) | 2023.03.13 |
🌊 [javascript] 타입 변환과 단축 평가 (0) | 2023.03.11 |
🌊 [javascript] 스코프 (0) | 2023.03.11 |
🌊 [javascript] 객체 리터럴 (0) | 2023.03.11 |