Cookie VS LocalStorage VS SessionStorage

사용 이유

기본적으로 http 프로토콜 환경은 connectionless(비연결성), stateless(상태없음) 특징을 가지고 있어 서버는 클라이언트가 누구인지 매번 확인해야 하므로 특성이자 약점을 보안하기 위해 쿠키, 세션, 웹 스토리지를 사용합니다

 

- Connectionless
HTTP 는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다.

- Stateless
연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다.

 

Cookie

하이퍼 텍스트의 기록서의 일종으로서 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 설치되는 작은 기록 정보

특징 

• 브라우저(클라이언트) 로컬에 저장되는 key, value 형태의 작은 파일이며 이름, 값, 만료시간, 경로 정보를 포함하고 있다
• 클라이언트 상태 정보를 로컬에 저장했다가 참조
• 300개까지 저장가능하며 하다의 도메인에서 20개의 값만 가질 수 있으며 쿠키 한개당 4kb이하로 저장가능
• response header에 set-cookie를 사용하여 클라이언트에 쿠키를 만들 수 있다
• 쿠키 설정을 하게 되면 웹에서 요청마다 연결과 해지되며 만들어진 쿠키는 사용자가 따로 요청하지 않아도 request시에 request header를 넣어서 서버에 전송

 

Web Storage

웹 브라우저에서 제공하는 표준 JS API 이며 브라우저에 key, value 형태로 저장되어 쿠기와 유사하며 local storage, session storage가 있다

특징

• 로컬스토리지, 세션 스토리지 가있으며 같은 객체를 상속받고 있어 메서드가 같음
• 쿠기와 달리 자동 전송 기능 없음
• 오리진 단위로 접근 제한 (CSRF 로부터 안전)
• 쿠기보다 더 큰 용량 지원 (5mb)

- CSRF(Cross Site Request Forgery)
웹 보안 취약점의 일종이며 사용자가 자신의 의지와는 무관하게 공격자가 의도한 데이터 수정, 삭제, 등록 등을 특정 웹사이트에 요청하게 하는 공격입니다.

 

LocalStorage

• 사용자가 데이터를 지우지 않는 이상 데이터는 영구적으로 보관
• 브라우저 종료시 데이터가 유지
• 탭 별로 데이터를 공유

SessionStorage

• 브라우저나 탭을 끄면 데이터가 사라짐
• 데이터가 오리진 뿐만 아니라 브라우저 탭별로 별도의 저장소가 있어 데이터 공유 X

 

비교 

Cookie VS Storage

	Cookie	Storage
서버로 자동 전송	request시에 request header를 넣어서 서버에 전송	X
기간	수동으로 설정	로컬스토리지는 데이터를 지우지 않는 이상 영구적이며 세션스토리지는 탭을 닫으면 데이터가 지워짐
용량	4kb	5mb
데이터 형태	문자열	문자열, JS객체

 

LocalStorage VS SessionStorage

	LocalStorage	SessionStorage
기간	지우지 않는 이상 영구적	브라우저 또는 탭을 닫으면 지워짐
데이터 공유	탭을 여러개 열어도 공유	탭별 공유 x

 

브라우저에서 (크롬)에서 개발자도구 > Application에서 Cookie, LocalStorage, SessionStorage 확인

크롬에서 Cookies, Local storage, Session storage 보기

 

브라우저에 데이터를 저장할 수 있는 공간 쿠키, 로컬스토리지, 세션스토리지가 있으며 위 사진처럼 브라우저에서 확인 할 수 있습니다