[웹] 쿠키와 세션 그리고 웹 스토리지를 사용하는 이유

포스팅 목적

• HTTP 의 특징을 통해 쿠키와 세션을 사용하는 이유를 알아봅니다.
• 쿠키와 웹 스토리지의 차이를 알아봅니다.

 

HTTP 의 특징

• 비연결지향 ( Connectionless ) : request 에 대한 response 를 해주면 서버와 클라이언트가 연결이 끊어집니다. 커넥션을 낭비하지 않기 때문에 리소스의 낭비를 줄일 수 있습니다.
• 상태없음 ( Stateless ) : 연결을 끊는 순간 상태 정보를 유지하지 않습니다.

 

쿠키와 세션

쿠키와 세션을 쓰는 이유

• HTTP의 2가지 특징인 connectionless 와 stateless 로 인해 서버는 클라이언트의 상태를 알 수 없습니다.
• 클라이언트의 상태를 알아야 될 경우 ( ex. 인증 ) 쿠키와 세션을 사용합니다.

 

쿠키의 특징

• 웹 사이트 접속시 key-value 형태로 저장되는 파일입니다.
• 클라이언트에 저장됩니다.
• 세션 관리, 개인화, 트래킹를 위해 사용합니다.
• 매 요청마다 자동으로 포함되어 서버에 불필요한 정보를 전달합니다.
• 용량이 4KB 로 제한적입니다.
• 클라이언트에 존재하기 때문에 보안에 취약합니다.

 

세션의 특징

• 웹 사이트 접속시 클라이언트에 부여한 ID 를 관리하는 저장소입니다.
• 서버에 저장되어 사용자가 많아질 수록 서버 자원을 많이 사용합니다.
• 서버에 존재하기 때문에 보안에 좋습니다.

 

비교

	쿠키(Cookie)	세션(Session)
저장 위치 및 사용 자원	클라이언트	서버
저장 형식	text	Object
만료 시점	쿠키 저장시 설정	브라우저 종료시 삭제
용량 제한	총 300개 하나의 도메인 당 20개 하나의 쿠키 당 4KB	제한 없음
속도	세션보다 빠름	쿠키보다 느림
보안	세션보다 안좋음	쿠키보다 좋음

 

쿠키와 세션을 이용한 로그인 판단

쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

 

세션의 동작 방식

1. 클라이언트가 서버에 접속 시 세션 ID를 발급.
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용.
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옴.
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답.

 

cookie, sessionStorage, localStorage 의 차이점

쿠키와 웹 스토리지 ( 로컬 스토리지, 세션 스토리지 ) 는 클라이언트 측에서 값을 key-value 형식으로 저장하는 저장소입니다.

 

저장소별 저장하면 좋은 데이터 유형

• 쿠키 : 다시 보지 않음 팝업 창
• 로컬 스토리지 : 자동 로그인, 다크모드 / 라이트모드
• 세션 스토리지 : 일회성 로그인, 입력 폼 정보, 비로그인 장바구니

 

비교

	쿠키	로컬 스토리지	세션 스토리지
생성	클라이언트 서버 ( Set-Cookie 헤더 사용 )	클라이언트	클라이언트
데이터 공유 범위	*오리진 별	오리진 별	오리진 및 탭 / 윈도우 별
만료	수동으로 설정	영구적	탭을 닫을 때
서버 전송여부	Cookie 헤더를 통해 자동 전송	X	X
용량	개당 4KB	5MB 정도	5MB 정도
지원 버전	대부분	HTML5	HTML5
호출 방법	document.cookie	window.localStorage	window.sessionStorage

* 오리진 ( Origin ) : 프로토콜, 도메인, 포트

 

참고 자료

• 쿠키(Cookie)와 세션(Session)
• 쿠키와 세션의 차이, 용도, 사용법(cookie,session)
• 쿠키(Cookie), 세션(Session) 특징 및 차이
• JSESSIONID
• HTTP 는 Stateless 한데 로그인은 어떻게 구현할 수 있을까? (세션/쿠키를 이용한 인증)
• 쿠키(Cookie)와 세션(Session) & 로그인 동작 방법
• 쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지