쿠키, 세션, 웹 스토리지

쿠키와 세션에 대해서만 알고 있었는데, 웹 스토리지에 대해 학습하게 되어서 개념 정리가 필요하다고 느꼈다. 이번 포스팅을 통해 등장 배경과 특징에 대해 알아보고자 한다.

쿠키와 세션의 등장 배경

기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없고, 이러한 한계를 보안하기 위해 쿠키와 세션이 등장하게 되었다.

• 비연결성지향(connectionless)
  먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다.

• 무상태(stateless)
  연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다.

쿠키

쿠키는 클라이언트와 서버 간에 데이터를 주고받기 위해 사용된다. 클라이언트에서 관리되며,
주로 사용자의 로그인 상태 유지, 사용자 설정 저장 등에 사용된다.

• 저장 위치: 클라이언트(브라우저)
• 용량 제한: 약 4KB
• 수명: 만료 날짜를 지정할 수 있으며, 지정하지 않으면 세션 종료 시까지 유지
• 보안: 전송 시 암호화되지 않으면 보안 취약
• 전송: 매 HTTP 요청 시 서버로 전송

세션

세션은 로그인 상태와 같은 사용자별 데이터를 유지하기 위해 사용된다. 서버에서 관리되며,
클라이언트는 세션 ID를 통해 서버에 접근한다.

• 저장 위치: 서버
• 용량 제한: 서버 메모리에 의존
• 수명: 브라우저를 닫을 때까지 혹은 서버에서 설정한 만료 시간까지
• 보안: 서버에서 관리되므로 비교적 안전
• 전송: 세션 ID가 쿠키로 저장되어 전송됨

웹 스토리지

웹 스토리지는 HTML5 표준의 일부로, 쿠키의 단점을 보완하여 도입된 클라이언트 측 저장소(객체)이다.
웹 스토리지는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 나뉜다.

로컬 스토리지

로컬 스토리지는 웹 애플리케이션 데이터의 영구적 저장을 위해 사용되며, 주로 자동 로그인 등 지속적으로 필요한 데이터를 저장할 때 사용된다.

• 저장 위치: 클라이언트(브라우저)
• 용량 제한: 브라우저마다 다르지만 일반적으로 5MB 이상
• 수명: 명시적으로 삭제되지 않는 한 영구적으로 저장
• 보안: 도메인별로 접근 제한

세션 스토리지

세션 스토리지는 세션 동안의 데이터를 저장하고, 새로고침 후에도 데이터가 유지되며, 주로 일회성 로그인 정보, 입력폼 저장 등일시적으로 필요한 데이터를 저장할 때 사용된다.

• 저장 위치: 클라이언트(브라우저)
• 용량 제한: 브라우저마다 다르지만 일반적으로 5MB 이상
• 수명: 브라우저 탭 또는 창이 닫힐 때까지
• 보안: 도메인별로 접근 제한

웹 스토리지 정리

로컬 스토리지는 명시적으로 삭제하지 않는 한 데이터가 영구적으로 저장되는 반면에,
세션 스토리지는 브라우저 탭이나 창이 닫힐 때까지만 데이터를 유지한다.
쿠키의 제한된 용량(약 4KB)에 비해 웹 스토리지는 브라우저마다 다르지만 일반적으로 5MB 이상을 저장할 수 있다.
도메인별로 접근이 제한되기 때문에 보안적인 측면에서 더 안전하게 데이터를 관리할 수 있다.

요약

저장소 타입	저장 위치	전송 시점	지속성
쿠키	클라이언트 및 서버	요청, 응답 시마다 함께 전송	설정된 유효 기간 동안 저장
세션	서버	요청 시 클라이언트가 식별자를 붙여 전송	세션이 종료될 때까지 저장
로컬 스토리지	클라이언트	요청에는 포함되지 않음	명령 있기 전까지 계속 저장
세션 스토리지	클라이언트	요청에는 포함되지 않음	해당 탭이 유지되는 동안만 임시 저장

마치며

이번 포스팅을 통해 HTTP 프로토콜의 비연결성지향과 무상태성의 한계를 보완하기 위한 다양한 기술들을 다시 한 번 정리해 볼 수 있었다. 쿠키와 세션의 기본 개념은 익숙했지만, 웹 스토리지에 대해서는 구체적으로 이해하지 못했던 부분들을 학습하게 되었다. 특히, 로컬 스토리지와 세션 스토리지의 차이점과 사용 사례를 알게 되니 실제 개발에서 어떻게 활용할 수 있을지에 대한 판단력도 얻을 수 있었던 것 같다. 웹 스토리지는 클라이언트 측에서 더 많은 데이터를 안전하게 관리할 수 있도록 도와주며, 사용자 경험을 향상시키는 만큼, 앞으로 있을 프로젝트에서 적절한 저장소를 선택하고 활용하는 데 있어 이번 정리가 큰 도움이 될 것 같다.

---

참고자료:
https://ko.javascript.info/localstorage
https://interconnection.tistory.com/74