브라우저에는 정보를 저장하기 위해 사용되는 쿠키, 로컬 스토리지, 세션 스토리지 총 3가지의 저장소가 있다.

해당 포스팅에서는 각각의 특징들을 간단하게 정리해보려고 한다.

3가지의 저장소의 공통점

key와 value값으로 이루어져 있고 모두 문자열로 저장된다.

document.cookie
HTML5 이전부터 사용
페이지 요청 시 서버로 쿠키 정보를 전송
4KB 용량 제한
유효기한이 있음

로컬 스토리지와 세션 스토리지

공통점

HTML5에서 추가
페이지 요청 시 서버로 정보를 전송하지 않음
모바일 2.5MB, 데스크톱은 5MB~10MB 용량 제한
setItem, getItem, removeItem 메소드들을 사용

로컬 스토리지 (localStorage)

window.localStorage
제거하기 전까지 영구적으로 정보를 저장 (브라우저나 OS를 종료해도 유지)
민감하지 않은 정보이면서 유지해야 하는 정보에 주로 사용 (자동 로그인 등)

세션 스토리지 (sessionStorage)

window.sessionStorage
세션 종료 시 정보가 제거됨 (브라우저나 OS를 종료하면 제거)
휘발성 정보들에 주로 사용 (로그인 체크 등)

참고

https://ko.javascript.info/localstorage https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

← Previous Post Next Post →