[CS] 쿠키와 세션 그리고 브라우저 저장소

🚨 본 글은 필자가 발표를 위해 기록한 글입니다.

 

1. 쿠키(Cookie)

[1] 정의

➡️ 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일

• 하나의 쿠키당 4kb를 저장함.
• 웹사이트에서 쿠키를 설정하게 될 시 그 이후 모든 웹 요청은 쿠키 정보를 포함해 전송.
• 인증 기한이 있고, 키-값으로 이뤄져있음.
• 쿠키를 상실하면 정보를 상실하는 것과 같다.

2. 세션(Session)

[1] 정의

➡️ 쿠키와 달리 사용자 정보를 서버에 저장하여 서버측에서 세션ID파일을 생성해 관리함.

• 세션 ID로 클라이언트를 구분 ➡️ 요구에 맞는 서비스를 제공
• 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨

+) 쿠키와 세션의 차이점

• 정보가 저장되는 위치(세션 - 서버, 쿠키 - 클라이언트)
• 쿠키에 비해 세션이 보안에 강함.

3. 우리가 쿠키와 세션을 사용해야 하는 이유는?

➡️ HTTP는 stateless 즉, 비연결성을 지향한다. 클라이언트에 정보를 넘겨주고 나게 되면 서버는 그 정보를 기억해내지 못한다.

그래서 상태를 저장하기 위해 쿠키와 세션을 사용한다.

 

4. 브라우저 저장소(WEB Storage)

[1] 정의

- HTML5부터 제공하는 기능으로 특정 데이터를 서버가 아닌 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능. 

- 키-값의 형태로 데이터를 저장하고, 키를 기반으로 데이터를 조회할 수 있다.

- 쿠키(만료 기한이 있는 키-값 형태의 저장소)와 비슷한 기능을 한다.

 

[2] 필요한 이유

- 쿠키/WEB Storage 모두 브라우저에 저장하지만 쿠키는 단점이 있는데, 3가지로 정리할 수 있다.

1. 데이터 저장에 제한이 있다. ➡️ 하나의 쿠키를 저장하는데 4kb가 필요하다.
2. 보안에 취약하다. ➡️ HTTP Request(클라이언트 요청 메세지 전달)에 암호화 되지 않은 상태로 사용하기 때문이다.
3. 성능에 영향을 준다. ➡️ 쿠키가 모든 HTTP Request에 포함되어있기 때문에 웹서비스 성능에 영향을 줄 수 있다.

[3] 쿠키 vs WEB Storage 비교하기

쿠키	WEB Storage
쿠키 설정 이후 모든 웹 요청은 쿠키 정보를 포함해 매번 서버로 전송.	저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지 않는다.
문자열의 형태 데이터만 저장이 가능하다.	구조화된 객체 정보를 저장할 수 있다.(단, 브라우저 지원 확인 필요)
4kb로 용량이 제한된다.	용량 제한이 없다.

[4] WEB Storage 종류

1. Local Storage : 브라우저를 닫았다 열어도 계속 데이터가 유지됨
2. Session Storage : 브라우저가 열려있는 한 Reroad해도 계속 유지, 닫으면 삭제됨.