Window.localStorage 와 Window.sessionStorage의 역할과 사용법

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값(key-value) 쌍을 저장할 수 있게 해줍니다.

 

이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있게 됩니다.

 

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.

• setItem(key, value) : 키-값 쌍을 보관합니다.
• getItem(key) : 키에 해당하는 값을 받아옵니다.
• removeItem(key) : 키와 해당 값을 삭제합니다.
• clear() : 모든 것을 삭제합니다.
• key(index) : 인덱스(index)에 해당하는 키를 받아옵니다.
• length : 저장된 항목의 개수를 얻습니다.

localStorage.setItem('myCat', 'Tom'); // 로컬 저장소에 값 저장(setter)

const cat = localStorage.getItem('myCat'); // 로컬 저장소의 해당 key에 대응되는 value 참조(getter)

localStorage.removeItem('myCat'); // 로컬 저장소의 해당 key에 대응되는 key-value 쌍을 삭제

localStorage.clear(); // 로컬 저장소 항목 전체 삭제