HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 가져 클라이언트의 상태를 보존하지 않습니다.
HTTP의 이러한 단점을 보완하고자 쿠키와 웹 스토리지를 통해 서버가 아닌 클라이언트의 사용자 정보 및 상태를 저장해두고 필요시마다 데이터를 꺼내서 서버의 전달하는 방식을 구현합니다.
쿠키(Cookie): 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 Key-value 형식의 저장소
웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기위해 만들어진 Key-value 형식의 저장소
클라이언트(브라우저) 로컬에 저장하는 만료기간을 가진 작은 텍스트파일로, 서버와 클라이언트가 주고 받은 내용을 기억하고 불러올수 있는 역할을 수행합니다.
만료 기간을 정할 수 있어 사용자 인증이 유효한 시간을 명시할 수 있고, 브라우저가 종료되어도 만료 기간 내에는 클라이언트에 보관되어 인증이 유지된다는 특징이 있습니다.
window 객체의 프로퍼티로 존재하기도 하는 웹 스토리지는 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소를 말합니다.
웹 스토리지로는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다.
두 스토리지는 영구성과 데이터 공유 범위로 구분됩니다. 먼저 로컬 스토리지는 브라우저를 종료해도 데이터가 영구적으로 보관됩니다. 반면 세션 스토리지는 브라우저 종료 시 데이터도 함께 삭제됩니다.
또한 로컬스토리지는 도메인이 같다면 전역적으로 데이터가 공유된다는 특성이 있으나, 세션 스토리지는 도메인이 같더라도 브라우저가 다르면(탭 브라우저, 다른 브라우저) 브라우저 컨텍스트가 다르기 때문에, 브라우저마다 각각의 세션 스토리지가 형성되어 데이터가 공유되지 않습니다.
로컬 스토리지 | 세션 스토리지 | |
---|---|---|
데이터 유지 | 영구성(브라우저 종료 시 보관) | 비영구성(브라우저 종료 시 삭제) |
데이터 범위 | 동일한 도메인 전역 공유 | 브라우저간 공유 불가 |
접근 | window.localStorage | window.sessionStorage |
서버에 불필요하게 데이터를 저장하지 않아도 되어 서버 부담이 줄어듭니다.
쿠키에 비해 데이터 용량이 큽니다.(모바일 : 2.5MB / 데스크탑 : 5~10MB)
문자열은 물론 자바스크립트의 모든 원시형 데이터와 객체타입을 저장할 수 있습니다.
도메인 단위로 접근이 제한되는 CORS 특성 덕에 CSRF위협으로부터 안전합니다.
쿠키 : 일시적으로 필요한 가벼운 데이터를 저장할 때
다시보지않음
쿠키 팝업창, 로그인 자동 완성로컬 스토리지 : 브라우저가 종료되어도 지속적인 데이터 저장이 필요할 때
세션 스토리지 : 브라우저가 종료되면 사라지는 일시적으로 데이터를 저장할 때
e.g. 일회성 로그인, 입력 폼 저장, 비로그인 장바구니
📎 참고문서