Cookie
- 웹 서버가 브라우저에게 지시하여 사용자의 로컬 컴퓨터에 파일 또는 메모리에 저장하는 작은 기록 정보 파일
- 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀔 수 있다.
- 후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다. 만료는 유형에 따라 다르며 만료 기간은 서버 측 또는 클라이언트 측 (일반적으로 서버 측)에서 설정할 수 있다.
- 쿠키는 주로 서버 측에서 읽기(클라이언트 측에서 읽을 수도 있음) 위한 것이며, Local Storage 및 Session Storage는 클라이언트 측에서만 읽을 수 있다.
- 크기는 4KB보다 작아야 한다.
- 해당 쿠키에 대해 httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들 수 있다. 이렇게하면 쿠키에 대한 클라이언트 측 액세스가 차단된다.
단점 : 쿠키에 대한 정보를 매 헤더(Http Header)에 추가하여 보내기 때문에 상당한 트랙픽을 발생시킨다.
결제정보 등을 쿠키에 저장하였을때 쿠키가 유출되면 보안에 대한 문제점도 발생할 수 있다.
Web Storage
HTML5 에서 추가된 내용으로, 데이터를 클라이언트에 저장하는 저장소
키와 값을 저장(key-value Storage)할 수 있고, Web Storage를 상속받아 구현된 localStorage와 sessionStorage가 존재.이 둘의 가장 큰 차이점은 데이터의 영구성 이다.
- Local Storage
만료일이 없는 데이터를 저장하고, JavaScript를 통해서만 지워진다.(일부러 지우지 않는다면 브라우저를 닫고 열어도 계속 남아있음.)
저장 용량 한도는 쿠키, Session Storage Local Storage 3가지 중에서 가장 높다.
사용 예 : 지속적으로 필요한 데이터(자동 로그인 등)
- Session Storage
- Session Storage 객체는 세션에 대해서만 데이터를 저장한다. 페이지의 window가 바뀌거나 브라우저 또는 탭이 닫힐 때까지만 데이터가 저장된다.
데이터는 서버로 전송되지 않는다.
저장 용량 한도가 쿠키보다 크다(최소 5MB).
사용 예 : 잠깐 동안 필요한 정보(일회성 로그인 정보)
HTTP Session
- 쿠키의 트래픽 문제와 쿠키를 변경하는 보안적 이슈를 해결하기 위해 등장
- HTTP Session id를 식별자로 구별하여 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장.
- 클라이언트는 HTTP Session id를 쿠키로 메모리 저장된 형태로 가지고 있다. 메모리에 저장하기 때문에 브라우저가 종료되면 사라짐.
- 세션(HTTP Session) 절차
클라이언트 : 서버에 Resource를 요청. ->
서버 : HTTP Request를 통해 쿠키에서 Session id를 확인 ->
없으면 Set-Cookie를 통해 새로 발행한 Session-id를 전송 ->
클라이언트 : HTTP Request 헤더에 Session id를 포함하여 원하는 Resource를 요청 ->
서버 : Session id를 통해 해당 세션을 찾아 클라이언트 상태 정보를 유지하며 적절한 응답을 함
장점 : 서버에 저장하기 때문에 매우 관리하기 편하고 효율적
단점 : load-balancing/시스템 효율성에서 handling하기 어려움
세션 저장 장치가 부족한 시스템에는 부적합
※Session?
세션은 브라우저가 서버에 연결되어 있는 동안 유지하는 데이터 집합이다.
클라이언트는 HTTP Session ID를 메모리 저장된 형태로 가지고 있다.
메모리에 저장하기 때문에 브라우저가 종료되면 사라지게 된다.
서버의 리소스를 쓰기 때문에 세션을 많이 사용하면 서버의 리소스를 많이 쓰게 된다.
세션을 사용하면 서버를 확장시키는 것이 어려워진다.
https://seunghyun90.tistory.com/43
https://nesoy.github.io/articles/2017-03/Session-Cookie
https://dabok407.tistory.com/24
https://jongminfire.dev/cookie-session-web-storage-local-storage-session-storage
