페이지를 새로고침하면 이전에 있던 데이터들이 날라가게 된다.
이를 방지하기 위해 localStorage를 활용할 수 있다
localStroage
vs 쿠키
제공하는 메서드와 프로퍼티
setItem(key, value)
– 키-값 쌍 보관localStorage.setItem('test', 1);
getItem(key)
– 키에 해당하는 값 가져옴alert( localStorage.getItem('test') ); // 1
removeItem(key)
– 키와 해당 값 삭제clear()
– 모든 것을 삭제.key(index)
– 인덱스(index
)에 해당하는 키 가져옴length
– 저장된 항목의 개수.키 순회하기
localStorage 객체 자체는 iterable하지 않지만, 배열처럼 다룰 순 있다
ex) 일반 for문
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}
※ for ~ in
이 경우에는 hasOwnProperty()를 써야 setItem, getItem 등의 불필요한 내장 필드까지 가져오는 걸 방지할 수 있다
for(let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue; // setItem, getItem 등의 키 패스
}
alert(`${key}: ${localStorage.getItem(key)}`);
}
객체를 저장하려면
JSON 문자열로 변환하여 저장
localStorage.setItem('user', JSON.stringify({name: "John"}));
let user = JSON.parse(localStorage.getItem('user'));
alert( user.name ); // John