LocalStorage와 SessionStorage

Web Storage

웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조.

LocalStorage와 SessionStorage

Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다. 각각 localStorage와 sessionStorage로, 그것들은 브라우저 내에 문자열로 이루어진 "키(key)-값(value)" 쌍을 저장할 수 있게 해준다.

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

LocalStorage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

SessionStorage

SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. SessionStorage는 windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

---

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

• setItem(key, value) : 키-값 쌍을 보관한다.
• getItem(key) : 키에 해당하는 값을 받아온다.
• removeItem(key) : 키와 해당 값을 삭제한다.
• clear() : 모든 것을 삭제한다.
• key(index) : 인덱스(index)에 해당하는 키를 받아온다.
• length : 저장된 항목의 개수를 얻는다.
• Object.keys를 사용해 키 전체를 얻을 수 있다.

두 스토리지 객체는 Map과 유사하게 setItem/getItem/removeItem을 지원한다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있다.

ref : https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage
https://ko.javascript.info/localstorage