💡 들어가며
아직은 큰 프로젝트를 하지도 않거니와, 그냥 redux와 REST API만으로 상태관리를 해왔는데, 이번 기회에 공부하게 되며 storage와 cookie도 상황에 따라 적절히 사용해야겠다고 생각하게 됐다.
그렇다면 각 저장소 및 파일의 차이를 알아보자.
👏 핵심 요약
-
공통점:
데이터를Client측에서 관리, 저장한다는 점
(쿠키 역시Modern Storage APIs전에는 저장 용도로 사용 - 현재 비권장) -
차이점:
-
Storage와Cookie는 서버 전달 여부에서 차이가 있다.LocalStorage, SessionStorage:
window객체에서 저장. 서버 전달 X
Cookie: 서버와 지속적으로 요청 및 응답을 주고받음. -
각 스토리지는 저장 영구성 측면에서 차이가 있다.
LocalStorage: 브라우저가 종료돼도 저장. (직접 삭제 전까지 저장)
SessionStorage: 페이지 세션 종료 시 데이터 소멸(일회성이 강함)
기타
- Cookie는 유효기간을 따로 설정할 수 있다는 측면에서 장점을 갖고 있다.
- 로컬스토리지와 세션스토리지는 거의 큰 차이가 없지만, 저장의 영구성 측면에서 차이를 보인다!
📢 상세설명
스토리지의 경우 메소드가 동일하며(getItem, setItem, removeItem, clear...) 모바일은 2.5mb, 데스크탑은 5mb~10mb 정도로 저장된다고 한다.
LocalStorage
HTTP,HTTPS등의 프로토콜 별로 자료를 구분하여 저장.
(즉https://abc.de와http://abc.de는 localStorage가 서로 다름)- 각 문자 2바이트인
UTF-16 DOMString의 형태로 저장
(key, value는 문자형태로 저장됨)- 의도적인 설정이 없는 한 데이터 만료되지 않음.
SessionStorage
- 페이지 세션이 끝날 때 데이터 제거
종료 기준: 브라우저가 열려있는 한(새로고침& 페이지 복구에서도 유지)- 페이지 세션이 기준이기 때문에, 각각의 탭/창마다 생성
Cookie
- 이름-값 페어로 시작
(<cookie-name>=<cookie-value>)- 주 사용 목적은 저장 관리 / 개인 환경 설정 / 트래킹 용도
- connectionless, stateless한 HTTP 요청에서의 단점을 보완하는 용도
- 4KB의 용량으로, 서버가 사용자에게 전송하는 데이터.
- 모든 요청마다 쿠키가 함께 전송되므로 성능 저하의 원인이 될 수 있음
- 서버에서 클라이언트에게 응답 시,
Set-Cookie HTTP 응답 헤더를 전송 가능 ->
이를 통해 클라이언트에게 해당 쿠키를 저장하라고 전달 ->
브라우저는 Cookie 헤더를 사용, 저장했던 모든 쿠키들을 회신
워낙 쿠키의 경우, 데이터 보안에 취약하기에, 다음과 같은 속성들을 설정한다.
httponly: JS를 통한 추출 방지, 세션 하이재킹과 XSS에 대한 보안Expires: 쿠키 만료 기한 설정. (서버가 아닌 클라이언트에 상대적)Secure:HTTPS프로토콜 상에서 암호화된 요청일 경우에만 전송
쿠키에 대한 주요 설명은 이 외에도 참고할 것이 너무 많다.
다음 MDN 문서를 통해 참고하기를 권장한다.
📃 참고자료
참조 1. MDN 세션스토리지 / 로컬스토리지
참조 2. MDN 쿠키
참조 3. 로컬스토리지, 세션스토리지(블로그)
참조 4. 쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지(블로그)
.jpg)