쿠키와 웹 스토리지(로컬, 세션)
- 쿠키, 로컬 스토리지, 세션 스토리지는 모두 클라이언트(브라우저) 로컬에 key-value 형태로 데이터를 저장할 수 있는 저장소이다.
-
클라이언트에서 사용자 인증 정보를 저장하거나, 캐시 역할 등을 수행한다.
-
예를 들어 인터넷 쇼핑몰의 장바구니 기능이 있다고 할 때, 매번 서버에 장바구니 정보를 요청해서 받아오는 것은 비효율적이다.
이럴 때 웹 스토리지에 장바구니 정보를 저장해서 요청 없이 기능을 구현할 수 있다. -
쿠키와 웹 스토리지는 비슷한 역할을 하지만 차이점이 많다. 이것에 대해 조금 더 알아보자
쿠키
- 만료기한이 있는 키-값 형태의 저장소
- 하나의 쿠키는 최대 4KB의 데이터를 저장 가능
- 최대 300개, 도메인 당 20개의 쿠키 저장 가능
- HTTP 요청을 보낼 때 요청에 쿠키 데이터가 request의 header에 자동으로 담겨 전송
- 서버는 쿠키값을 변경하여야 할 때 변경된 쿠키값을 응답과 함께 전송
역할
- 서버에 사용자 정보를 알리는 등, 클라이언트와 서버간의 지속적인 데이터 교환을 가능하게 함
단점
- 요청에 무조건 쿠키가 담겨 전송되기 때문에 필요없는 정보로 인해 서버에 부담을 줄 수 있음
- 4KB의 적은 용량
- 암호화가 되지 않아 민감한 정보가 있다면 도난 위험
로컬 스토리지
- 만료기한이 없는 키-값 형태의 저장소
- 모바일 2.5MB, 데스크톱 5~10MB의 쿠키 대비 큰 용량
- 서버가 값을 변경할 수 없음
- 브라우저를 닫아도 데이터가 유지
- 도메인 단위로 접근이 제한되어 CSRF로부터 안전 (프로토콜, 호스트, 포트가 같아야 함)
역할
- 자동 로그인 등 오랫동안 유지해야하는 정보를 저장하기 위해 사용
세션 스토리지
- 브라우저나 탭을 닫을 때 데이터가 제거되는 키-값 형태의 저장소
- 그 외의 특징은 로컬 스토리지와 동일
역할
- 일시적으로 필요한 데이터 저장 (일회성 로그인 정보, 입력 폼)
