Web Storage, Session, Cookie(웹 스토리지, 세션, 쿠키)

프로젝트를 하면서 자주 접하는 웹스토리지, 세션, 쿠키가 무엇인지 궁금하여 정리해보았습니다!
알아보기 전에 HTTP 프로토콜이란 것을 알아야 이해하기 쉽기 때문에 간략히 설명하겠습니다.
 

HTTP 프로토콜이란?

 HTTP는 인터넷에서 데이터를 주고받기 위한 서버/클라이언트 모델의 프로토콜입니다.

• 비연결성(connectionless): 클라이언트가 서버에 요청을 보내고, 서버는 응답을 보낸 후 연결을 끊습니다.
• 무상태(stateless): 각 요청 간에 서버는 클라이언트의 상태를 유지하지 않습니다.

이 특성 때문에, HTTP는 요청만으로는 클라이언트를 구별할 수 없습니다.

 
즉, 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화됩니다!
이러한 문제점을 해결하기 위해 데이터 저장에 사용되는 것이 쿠키,세션,웹 스토리지 입니다.

쿠키(Cookie)

• 클라이언트(브라우저) 로컬에 저장되는 키와 값 형태의 작은 파일이며 이름, 값, 만료시간, 경로 정보가 포함
• 클라이언트의 상태 정보를 로컬에 저장하고 참조하는 데 사용
• 클라이언트에 300개까지 쿠키를 저장, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB 까지 저장이 가능
• Response Header의 set-cookie 속성을 통해 생성
• 브라우저가 자동으로 Request Header에 포함해 서버에 전송

쿠키의 주요 목적 3가지

• 사용자 인증 및 세션 관리
  • 사용자가 웹사이트에 로그인하면 쿠키를 통해 사용자 정보를 저장하고 관리
  • 이를 통해 사용자의 로그인 상태를 유지하고, 세션을 관리할 수 있습니다.

• 사용자 경험 향상
  • 쿠키를 사용하여 사용자의 선호도, 방문 기록, 장바구니 정보 등을 저장
  • 이를 통해 사용자에게 맞춤형 콘텐츠와 서비스를 제공할 수 있어 사용자 경험을 향상

• 웹 분석 및 타겟팅 광고
  • 사용자의 행동 데이터(페이지 방문, 클릭 등)를 수집할 수 있습니다.
  • 이를 바탕으로 사용자 분석 및 타겟팅 광고 등의 마케팅 활동에 활용

세션(Session)

• 세션은 서버 측에서 클라이언트를 구분하고 상태를 관리하는 방식
• 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여합니다.
• 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지하고, 일정 시간 응답이 없으면 세션 정보를 삭제
• 데이터가 서버에 저장되어 쿠키보다 보안이 좋지만, 사용자 수가 많아지면 서버 메모리 사용이 증가
• 클라이언트가 요청을 보내면, 서버는 set-cookie로 세션 ID를 클라이언트에 전달합니다.
• 클라이언트와 서버 간에는 세션 ID만을 주고받아 보안 위협 감소

쿠키와 세션의 차이점?

• 데이터 저장 위치
  • 쿠키: 클라이언트(브라우저)
  • 세션: 서버

• 보안
  • 쿠키: 클라이언트에 저장되기 때문에 스니핑(sniffing) 등의 공격에 노출될 수 있습니다.
  • 세션: ID만 클라이언트에 저장하고 실제 데이터는 서버에 저장되므로 보안성이 더 높습니다.
• 라이프사이클
  
  • 쿠키: 브라우저를 종료해도 만료기간이 남아있다면 유지됩니다.
  • 세션: 브라우저 종료 시 만료기간과 상관없이 종료됩니다.

• 속도: 쿠키>세션

 웹 스토리지(Web Storage)

• 클라이언트(브라우저)에 데이터를 저장할 수 있도록 HTML5 부터 추가된 저장소
• 간단한 Key-Value 스토리지 형태
• 쿠키와 달리 자동으로 서버에 전송되지 않습니다.
• 오리진(Origin)(도메인, 프로토콜, 포트) 단위로 접근이 제한되는 특성 덕분에 CSRF 로부터 안전
• 큰 저장 용량 지원(모바일 2.5MB, 데스크탑 5~10MB)
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음(자바스크립트 내에서만 수행가능)
• 오직 문자형(String) 데이터 타입만 지원(다른 데이터 타입은 문자열로 변환해 저장)
• 로컬스토리지, 세션스토리지가 있으며 같은 스토리지 객체를 상속하기 때문에 메서드가 동일

로컬 스토리지(localStorage)

사용자가 데이터를 지우지 않는 이상, 브라우저나 운영체제를 종료해도 데이터가 계속 남아있는 영구적인 저장소입니다. 이 데이터는 동일한 브라우저에서만 접근할 수 있으며, 주로 자동 로그인 유지와 같이 지속적으로 필요한 정보를 저장하는 데 사용됩니다.

• 예시

// 데이터 설정
localStorage.setItem('username', 'remazitensi');

// 데이터 가져오기
const username = localStorage.getItem('username');
console.log('저장된 사용자 이름:', username); // 출력 결과: "remazitensi"

이 설정은 브라우저를 종료하고 다시 열어도 유지됩니다. 따라서 다른 창에서도 같은 페이지를 열어보면 설정된 데이터가 그대로 있습니다!
 
로컬스토리지는 동일한 오리진(도메인, 포트, 프로토콜)을 가진 모든 창에서 공유됩니다. 즉, 하나의 웹사이트(도메인)에서 열린 모든 창들은 동일한 로컬스토리지를 공유하며, 이로 인해 한 창에서 저장된 데이터는 다른 창에서도 접근하여 사용할 수 있습니다.

세션 스토리지(sessionStorage)

브라우저 탭 또는 창에 종속되어 데이터를 저장합니다. 각각의 탭이나 창에서는 독립적으로 데이터를 관리하며, 탭이나 창을 닫을 경우 해당 데이터는 제거됩니다. 따라서 페이지를 새로 고침해도 세션 스토리에 저장된 정보는 유지되지만, 탭을 닫고 다시 열 경우에는 저장된 데이터가 사라집니다. 이러한 특성 때문에 세션스토리지는 일시적으로 필요한 데이터를 저장할 때 유용하게 사용됩니다.

• 예시

세션 스토리지에 데이터 설정하기

sessionStorage.setItem('username', 'remazitensi');

현재 탭에서 데이터 확인하기

console.log(sessionStorage.getItem('username')); // 출력 결과: "remazitensi"

새로운 탭에서 데이터 확인하기 

console.log(sessionStorage.getItem('username')); // 출력 결과: null

 세션 스토리지는 브라우저 세션을 기준으로 데이터를 저장하며, 다른 탭 간에는 데이터가 공유되지 않기 때문에 위 예시에서는 새로운 탭에서는 저장된 데이터를 찾을 수 없어 'null'이 반환됩니다.