쿠키, 그리고 웹 스토리지에 해당하는 로컬 스토리지와 세션 스토리지는 모두 브라우저에 데이터를 저장하는 방식인 클라이언트 기반 저장소입니다.
그러나 데이터의 저장 위치, 수명, 관리 주체, 저장 목적 등에 차이가 존재합니다.
아래에서 쿠키, 로컬 스토리지, 세션 스토리지의 순서로 자세히 살펴보겠습니다.
🗂️ 쿠키
쿠키(cookie)란 웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 작은 데이터 조각을 의미합니다.
- TCP school
웹 사이트에 접속하면 종종 쿠키의 사용 여부를 물어보는 아래와 같은 팝업을 볼 수 있습니다.
쿠키의 특징은 다음과 같습니다.
- 키-값 형태의 데이터로 저장됩니다.
- 문자열 형식만 저장할 수 있습니다.
- 하나의 키에 최대 4KB 크기의 값(작은 데이터 조각)까지만 저장할 수 있습니다.
- 클라이언트와 서버 모두 값에 접근할 수 있습니다.
- 한 번 설정되면 매번 요청 헤더에 담겨 서버로 전송됩니다.
개발자 도구에서 확인한 쿠키가 저장되어 있는 모습입니다.
쿠키가 HTTP 통신에서 사용되는 과정은 아래와 같습니다.
- 클라이언트가 서버에 웹 페이지를 요청합니다.
- 서버는 요청에 대한 응답과 함께 쿠키 정보를 전송합니다.(ex - 'Set-Cookie: KEY1=VALUE1; KEY2=VALUE2')
- 응답을 받은 클라이언트는 메시지 안에 있는 쿠키 정보를 브라우저 공간에 저장합니다.
- 이후 클라이언트에서 서버로 보내는 모든 요청에 쿠키 정보를 담아 전송합니다.(ex - 'Cookie: KEY1=VALUE1; KEY2=VALUE2')
서버는 위와 같은 과정으로 전달된 쿠키를 다음과 같이 활용합니다.
- 로그인 세션 유지: 세션 아이디를 쿠키에 저장하고 서버에게 로그인 여부를 확인
- 자동 로그인: 토큰을 쿠키에 저장하여 일정 기간 동안 로그인 상태 유지
- A/B 테스트 분기 저장: 사용자를 A와 B로 나누고 어느 쪽인지 쿠키로 관리
- 광고 타겟팅 및 트래킹: 사용자의 방문 내역을 저장해 맞춤형 광고 제공
- 분석 및 통계: 방문 패턴, 페이지 조회수, 이탈률 등
위와 같이 쿠키는 우리의 웹 사이트 사용을 편리하게 해 주지만 문제점도 가지고 있습니다.
- 보안 취약: 누구나 쉽게 확인할 수 있고, 수정하거나 삭제하기도 어렵지 않습니다. 따라서 쿠키는 탈취되거나 변조될 위험이 큽니다.
- 통신 성능 저하: 모든 요청에 쿠키 정보가 함께 전송되기 때문에 오가는 데이터의 양이 커져 웹 통신의 성능을 떨어트리는 원인이 될 수 있습니다.
- 개인 정보 침해: 사용자의 활동 기록을 추적하여 개인적인 정보를 침해할 수 있습니다. 쿠키에는 같은 도메인을 가진 쿠키인 '퍼스트 파티 쿠키'와 다른 도메인을 가진 쿠키인 '서드 파티 쿠키'가 존재하는데, 후자인 '서드 파티 쿠키'가 사용자의 동의를 받지 않고 웹 브라우징 활동을 추적해 광고 타겟팅에 이용할 수 있습니다.(ex - A 사이트에서 어떤 제품을 구입한 뒤에 B 사이트로 이동했는데, B 사이트에서 내가 쇼핑한 제품과 비슷한 광고가 뜨는 것)
쿠키에 관한 더 자세한 내용은 다음 블로그를 참고해 주세요.
현재 html의 표준 버전인 html5가 등장한 2014년 이전까지는 브라우저에서 데이터를 저장하는 방식은 쿠키가 유일했습니다.
그러나 html5와 함께 웹 스토리지(web storage)가 등장하여 쿠키보다 더 간편하고 효율적인 데이터 저장 방식을 제공하기 시작했습니다.
아래에서 웹 스토리지에 대해 자세히 살펴보겠습니다.
🗂️ 웹 스토리지
웹 스토리지(web storage)란 쿠키와 마찬가지로 클라이언트 상에서 데이터를 저장할 수 있는 방법의 하나입니다.
웹 스토리지는 html5가 등장하면서 추가된 기능 중 하나로, 쿠키와 비슷하면서도 다른 특징을 가지고 있습니다.
- 키-값 형태의 데이터로 저장됩니다.
- 문자열 형식만 저장할 수 있습니다.
- 최대 5MB에서 10MB 크기의 값까지 저장할 수 있습니다.(1MB = 약 1000KB)
- 클라이언트 단에서만 값에 접근(값 추가, 변경, 전달 등)할 수 있습니다.
- 값이 별도로 서버에 전송되지 않습니다.
위와 같은 특징을 가진 스토리지는 데이터가 유지되는 시간에 따라 두 가지 종류로 나눌 수 있습니다.
1) 로컬 스토리지
로컬 스토리지(local storage)란 데이터를 영구적으로 저장하는 방식을 의미합니다.
- TCP school
데이터가 한 번 저장되면 의도적으로 삭제하기 전까지 유지되기 때문에 브라우저 창이나 탭을 닫아도 데이터가 사라지지 않고 그대로 남아 있습니다.
따라서 로컬 스토리지는 새 창이나 탭으로 같은 웹 페이지(같은 도메인)를 열었을 때 같은 데이터가 공유됩니다.
개발자 도구에서 확인한 로컬 스토리지에 데이터가 저장되어 있는 모습입니다.
로컬 스토리지는 다음과 같이 활용됩니다.
- 사용자 환경 설정: 테마, 언어, 폰트 크기 등 UI 설정을 저장하고 재접속해도 유지
- 사용자 인증 정보: 인증 토큰을 저장해 페이지 새로고침이나 브라우저 재실행 후에도 로그인 상태 유지(보안 취약점 존재)
- 자주 사용하는 검색어 저장: 사용자의 최근 검색어 또는 선택된 필터 내용을 저장해 반복 검색 시의 편의성 제공
- 클라이언트 캐시 저장: 자주 사용하는 API 응답을 저장하여 페이지 로딩 속도 개선(ex - 사용자 프로필 정보 캐싱)
2) 세션 스토리지
로컬 스토리지와 마찬가지로 웹 스토리지의 한 종류입니다.
세션 스토리지(session storage)란 하나의 세션만을 위한 데이터를 저장하는 방식을 의미합니다.
- TCP school
현재의 세션이 연결되어 있는 동안에만 유효하기 때문에 브라우저 창이나 탭을 닫으면, 즉 클라이언트와 서버의 연결이 끊어지면 데이터도 함께 삭제됩니다.
따라서 세션 스토리지는 각각의 창과 탭마다 다른 데이터가 저장된 것을 알 수 있습니다.
개발자 도구에서 확인한 세션 스토리지에 데이터가 저장되어 있는 모습입니다.
세션 스토리지는 다음과 같이 활용됩니다.
- 폼 내용 임시 저장: 긴 설문이나 회원가입 폼 입력 도중 새로고침을 해도 작성한 내용이 유지됨
- 탭 간 상태 분리: 동일한 웹 사이트를 여러 탭에서 열었을 때 각 탭마다 독립된 상태 유지(ex - 로그인 세션 충돌 방지)
- 단일 세션용 사용자 행동 추적: 특정 탭에서의 행위(클릭, 이동, 입력 등)를 임시로 저장해 페이지 분석에 활용
세션 스토리지는 브라우저의 탭 단위로 유지되기 때문에 같은 탭 내에서 새로고침하거나 페이지를 이동해도 데이터는 남아 있습니다. 탭을 닫으면 초기화 되는 것입니다.
읽어주셔서 감사합니다:)
