📚 Reference
ZeroCho Blog, https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.
서론
HTTP 프로토콜의 한계(Connectionless, Stateless)를 극복하기 위한 기술인 쿠키와 세션을 보완하기 위한 기술이 웹 스토리지의 로컬 스토리지와 세션 스토리지입니다.
로컬 스토리지와 세션 스토리지
공통점
-
브라우저(클라이언트)의 데이터 저장소입니다.
-
데이터가 서버로 전송되지 않습니다.
-
데이터는 키-값의 데이터 형태로 저장됩니다.
-
쿠키의 저장용량(약 4KB)보다 훨씬 큰 저장용량(약 5MB)을 가집니다.
차이점
-
로컬 스토리지는 사용자가 데이터를 지우지 않는 이상 영구 보관합니다.
-
세션 스토리지는 세션을 닫을 경우 데이터가 제거됩니다.
-
로컬 스토리지는 도메인 별로 데이터를 공유합니다.
-
세션 스토리지는 세션(탭, 브라우저) 별로 데이터를 공유합니다.
(같은 도메인일지라도 다른 세션일 경우 데이터는 개별로 저장됩니다.)
Storage 메서드
-
두 저장소 모두
Storage객체를 상속 받습니다. -
키와 값은 모두 문자열로 저장됩니다.
-
Storage의getItem(),setItem(),removeItem(),clear()메서드를 이용해 제어합니다.
// getItem
localStorage.setItem('키', '값')
sessionStorage.setItem('키', '값')
// setItem
localStorage.getItem('키');
sessionStorage.getItem('키');
// removeItem
localStorage.removeItem('키');
sessionStorage.removeItem('키');
// clear
localStorage.clear();
sessionStorage.clear();
-
값으로 객체가 저장될 경우
Object.prototype.toString()메서드가 호출되어 저장됩니다. -
Object.prototype.toString()메서드는 사용자에 의해 재정의되지 않는다면[object, Object]를 반환합니다.
localStorage.setItem('키', {a: 'b', c: 'd'});
localStorage.getItem('키');
>> [object, Object]- 객체를 저장 시에 문자열로 바꾸고, 객체를 다시 얻어올 때 객체 타입으로 받아오기 위해서는
JSON.stringify()와JSON.parse()를 이용합니다.
localStorage.setItem('키', JSON.stringify({a: 'b', c: 'd'}));
JSON.parse(localStorage.getItem('키'));
>> {a: 'b', c: 'd'}