1. 개념
- localStorage는 브라우저에 제공하는 데이터 저장 메커니즘이다.
- 클라이언트 측에서 작은 양의 데이터를 로컬 컴퓨터에 영구적으로 저장할 수 있게 해준다.
- 주로 사용자 설정, 임시 데이터 등을 저장하는데 활용한다.
- F12(개발자 도구) > Application 항목 > localStorage 에서 확인 가능하다.
2. 사용방법
- localStorage.setItem(‘Key’,’Value’) : 저장할 key값과 data를 입력하면 저장된다.
- localStorage.getItem(‘Key’) : 출력할 key값을 입력하면 해당 데이터를 출력한다.
- localStorage.removeItem(‘Key’) : 삭제할 데이터의 key 값을 입력하면 데이터가 삭제된다.
- 따로 데이터를 수정하는 문법은 없다.
3. 기타
- 기본적으로 localStorage에는 Object / Array 타입의 데이터는 저장할 수 없다.
- 그냥 데이터를 저장하게 되면 데이터가 깨져서 저장이 되버린다.
- 따라서 저장하고자 한다면 JSON형태로 변경해야 Object / Array 타입의 데이터도 저장할 수 있다.
//Obj 데이터 선언
let obj = {name : 'Chicken'}
//JSON.stringify로 데이터를 변환해서 저장
localStorage.setItem('data', JSON.stringify(obj));
//출력하면 정상적으로 저장된것을 확인 가능
//데이터를 꺼낼 때는 JSON.parse로 반드시 데이터를 변환해서 꺼내야한다.
let bad = localStorage.getItem('data');
console.log(JSON.parse(bad).name);