Cookie, Session, Web Storage

1. HTTP 프로토콜의 특징

• 비연결지향(Connectionless): 클라이언트가 서버에게 Request를 보내고 서버가 클라이언트에게 Response를 보내면 접속을 종료
• 무상태(Stateless): 통신이 끝나면 상태 정보를 유지하지 않음

-> 즉, 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때 마다 초기화 되므로, 이러한 문제를 해결하기 위해 데이터 저장에 사용하는 것이 쿠키, 세션, 웹스토리지

2. 쿠키

: 클라이언트 로컬에 저장되는 키와 값 형태의 작은 파일 / 이름, 값, 만료 시간, 경로 정보 포함

2-1. 사용 목적

• 세션 관리: 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
• 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등의 세팅
• 사용자 추적: 사용자의 행동을 기록하고 분석하는 용도

2-2. 전송

• Response Header의 Set-Cookie 속성 사용하여 클라이언트에 쿠키를 만들고, 따로 설정하지 않아도 브라우저가 Request Header에 넣어서 서버로 전송
• 서버의 HTTP 응답 헤더에서 쿠키를 설정하고, 이후 클라이언트에서 보내는 모든 요청에 브라우저는 Cookie 헤더를 통해 저장된 모든 쿠키를 전송

2-3. 범위(Scope)

• Session Cookie: 클라이언트가 종료되면 삭제되는 휘발성 쿠키
• Permanent Cookie: 클라이언트가 종료되어도 일정 기간 유지

-> Permanent Cookie는 Expires(날짜와 시간) 혹은 Max-Age(초)를 명시해 해당 날짜 혹은 시간까지 쿠키를 유지할 수 있고, 아무것도 명시하지 않을 경우 Session Cookie가 됨
Set-Cookie: name=hellozin; Expires=Wed, 21 Oct 2019 07:28:00 GMT;

3. 세션

: 일정 시간동안 같은 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지하는 기술

• 클라이언트가 Request를 보내면 Response에 Set-Cookie를 통해 클라이언트의 유일한 ID값을 생성해 부여하고, 이를 통해 사용자 정보는 안전한 서버에 존재하며 클라이언트와 서버 간에는 ID값만을 전달해 보안 위협을 감소시켜 줌 -> 이 때 클라이언트에 저장되는 쿠키는 세션 종료 시 함께 소멸되는 Memory Cookie 타입을 가져 브라우저가 종료되면 세션과 관련된 쿠키도 삭제

4. 웹 스토리지

: 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능

• 쿠키와 기능 자체는 유사하나 4KB밖에 저장하지 못하는 쿠키와 달리 웹스토리지는 약 5MB까지 저장공간 이용 가능

4-1. 로컬 스토리지(Local Storage)

: 브라우저 자체에 반영구적으로 데이터 저장, 브라우저 종료해도 데이터 유지, 도메인이 다른 경우 로컬 스토리지에 접근 불가
ex) naver.com 로컬 스토리지에서 저장한 데이터는 google.com에서 접근할 수 없음

4-2. 세션 스토리지(Session Storage)

: 각 세션마다 데이터가 개별적으로 저장, 세션을 종료하면 데이터가 자동으로 제거, 같은 도메인이라도 세션이 다르면 데이터에 접근 불가

참고자료
https://velog.io/@hellozin/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%9B%B9-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80