쿠키(cookie), 세션(session), 캐시(cache), 웹 저장소(localstorage, sessionstorage)

cookie, session, cache , localstorage, sessionstorage 🤔

개발할 때 사용하는 저장소도 참 다양하다.

web storage 정도만 사용해봤는데 쿠키, 세션, 캐시는 개발을 하지 않아도 접해본 용어들일 것이다.

그렇다면 이 저장소들의 차이점은 뭘까?

그 전에, 저장소를 사용해야하는 이유는 뭘까?

 

HTTP (HyperText Transfer Protocol)

HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜로, 클라이언트와 서버는 이 HTTP를 통해 통신한다.

이 HTTP의 특징에는 connectionless(비연결성), stateless(무상태)가 있다.

 

connectionless(비연결성)

실제 요청을 주고 받을 때만 연결을 유지하고, 요청 후 응답이 종료되면 연결이 끊어진다.

최소한의 자원으로 서버를 유지할 수 있다는 장점이 있다.

 

stateless(무상태)

HTTP는 서버가 클라이언트의 이전 상태를 보존하지 않는다. 즉, 사용자의 이전 요청을 기억하지 못한다.

따라서 클라이언트가 이전 요청과 같은 데이터를 원한다면 다시 서버에 동일한 요청을 시도 해야한다.

 

이러한 http의 특징으로 인해 사용자의 로그인 상태를 유지하기 위해서는 별도의 저장소가 필요하다.

먼저 쿠키와 세션에 대해 살펴보자

 

 

쿠키(Cookie)

쿠키는 클라이언트(브라우저) 로컬에 보관되는 데이터로, 서버에서 생성 후 응답과 함께 클라이언트에 전송한다.

- 브라우저에 저장되어 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효기간 이후 자동으로 삭제된다.

- key-value 형태로 쿠키 저장소에 저장된다.

- String형태로 이루어져있으며 아스키코드의 알파벳과 숫자만 저장할 수 있다.

- 서버로부터 쿠키를 전달받은 웹 브라우저는 이후 서버에 요청을 보낼 때 쿠키를 헤더에 실어서 함께 전송한다.

- 클라이언트에서 쿠키를 수정할 수 있기 대문에 위변조 위험 존재. 따라서 쿠키값을 암호화하거나 중요한 정보를 담지 않도록 해야한다.

 

용량 

- 클라이언트에 300개, 하나의 도메인 당 20개 쿠키 저장 가능.

- 하나의 쿠키 당 4KB(4096byte(2^12))까지 저장 가능하다.

 

쿠키 동작 방식

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

 

세션(Session)

세션은 쿠키를 기반하고 있지만, 사용자 정보를 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

- 쿠키를 이용하여 세션id를 저장하고, 이를 통해 구분해서 서버에서 처리한다.

- 서버에 저장되므로 사용자가 많아질 경우 서버 부하가 발생할 수 있다.

 

용량

- server의 리소스로 클라이언트에서 제한 없음

 

세션 동작 방식

1. 클라이언트가 서버에 정보 요청
2. 서버에서는 요청 유효성 확인 후 세션 ID 생성, 저장
3. 서버가 클라이언트에 응답 시, 응답헤더에 쿠키에 추가하고, 쿠키에 세션 ID를 넣어 응답한다.
4. 클라리언트는 이후 세션 ID를 요청헤더에 추가하여 서버에 요청한다.
5. 서버에서는 요청 헤더의 세션 ID 값을 저장된 세션 저장소에서 찾아보고 유효성 확인 후 요청 처리 및 응답 한다.

 

쿠키 vs 세션

- 서버에서 관리되는 세션이 로컬에 저장되는 쿠키보다 보안적으로 우수하다.

- 쿠키는 로컬에 저장되기 때문에 서버의 처리가 필요한 세션에 비해 요청 속도가 빠르다.

- 세션은 세션이(브라우저가) 종료되면 삭제된다.

 

쿠키와 세션의 적절한 이용

세션이 쿠키에 비해 보안성은 좋지만 서버 자원에 한계가 있고, 속도가 느려질 수 있다는 단점이 있다.
따라서 자원 관리 차원에서 쿠키와 세션을 병행 사용하여 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다.

 

캐시(Cache)

웹 페이지 요소를 저장하기 위한 임시 저장소.

- 이미지, 파일, css, js 등 변경 사항이 크지 않고 용량이 큰 데이터를 저장하고 재사용한다.

- 사용자 인증을 도와주는 쿠키와 달리 캐시는 전송량을 줄여 웹 페이지의 렌더링 속도를 높이는 것이 목적이다.

 

단점

자주 변경되는 데이터를 캐시 방식으로 저장한다면 이전 캐시를 삭제하지 않는 한 변경된 데이터가 아닌 이전 데이터가 출력될 수 있다.

 

 

 

Web Storage : Local Storage와 Session Storage

Web Storage

쿠키의 문제점을 보완하기 위해 HTML5에 포함된, 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조.

웹 브라우저 자체에 있는 저장 공간으로, key : value 형태로 저장된다.

영구저장소(Local Storage)와 임시저장소(Session Storage)를 따로 두어 데이터의 지속성을 구분할 수 있어 환경에 따라 선택이 가능하다.

 

로컬 스토리지(Local Storage)

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.

- 도메인마다 별도로 생성된다.

 

세션 스토리지(Session Storage)

데이터가 지속적으로 보관되지 않는다.

- 앞서 언급한 'Session'과 성질이 비슷한데, 브라우저가 종료되면 Session Storage도 삭제된다.

- 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.

 

ex) 탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행하는 경우

Session Storage: 두 페이지의 Session Storage는 각각 별개의 영역으로 서로 침범하지 못한다,

Local Storage : 도메인만 같으면 전역적으로 공유가 가능하다.

 

---

참고

https://devuna.tistory.com/23

https://velog.io/@octo__/%EC%BF%A0%ED%82%A4Cookie-%EC%84%B8%EC%85%98Session

https://velog.io/@gwanuuoo/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%EC%BA%90%EC%8B%9C%EB%9E%80

https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90