쿠키와 웹 스토리지(로컬, 세션)

• 쿠키, 로컬 스토리지, 세션 스토리지는 모두 클라이언트(브라우저) 로컬에 key-value 형태로 데이터를 저장할 수 있는 저장소이다.

• 클라이언트에서 사용자 인증 정보를 저장하거나, 캐시 역할 등을 수행한다.

• 예를 들어 인터넷 쇼핑몰의 장바구니 기능이 있다고 할 때, 매번 서버에 장바구니 정보를 요청해서 받아오는 것은 비효율적이다. 이럴 때 웹 스토리지에 장바구니 정보를 저장해서 요청 없이 기능을 구현할 수 있다.

• 쿠키와 웹 스토리지는 비슷한 역할을 하지만 차이점이 많다. 이것에 대해 조금 더 알아보자

쿠키

• 만료기한이 있는 키-값 형태의 저장소
• 하나의 쿠키는 최대 4KB의 데이터를 저장 가능
• 최대 300개, 도메인 당 20개의 쿠키 저장 가능
• HTTP 요청을 보낼 때 요청에 쿠키 데이터가 request의 header에 자동으로 담겨 전송
• 서버는 쿠키값을 변경하여야 할 때 변경된 쿠키값을 응답과 함께 전송

역할

• 서버에 사용자 정보를 알리는 등, 클라이언트와 서버간의 지속적인 데이터 교환을 가능하게 함

단점

• 요청에 무조건 쿠키가 담겨 전송되기 때문에 필요없는 정보로 인해 서버에 부담을 줄 수 있음
• 4KB의 적은 용량
• 암호화가 되지 않아 민감한 정보가 있다면 도난 위험

로컬 스토리지

• 만료기한이 없는 키-값 형태의 저장소
• 모바일 2.5MB, 데스크톱 5~10MB의 쿠키 대비 큰 용량
• 서버가 값을 변경할 수 없음
• 브라우저를 닫아도 데이터가 유지
• 도메인 단위로 접근이 제한되어 CSRF로부터 안전 (프로토콜, 호스트, 포트가 같아야 함)

역할

• 자동 로그인 등 오랫동안 유지해야하는 정보를 저장하기 위해 사용

세션 스토리지

• 브라우저나 탭을 닫을 때 데이터가 제거되는 키-값 형태의 저장소
• 그 외의 특징은 로컬 스토리지와 동일

역할

• 일시적으로 필요한 데이터 저장 (일회성 로그인 정보, 입력 폼)