브라우저 저장소

브라우저의 저장소는 크게 쿠키와 웹 스토리지가 있습니다.
웹 스토리지는 로컬 스토리지와 세션 스토리지로 나뉘는데, 오늘은 이에 대해 알아보도록 합시다.

브라우저 저장소의 용도

1. 세션 관리
   서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리를 위해 사용됩니다.

2. 개인화
   사용자 선호, 테마 등의 세팅을 기억하는 용도로 사용됩니다.

3. 트래킹
   사용자 행동을 기록하고 분석하는 용도로 사용됩니다.

쿠키 (cookie)

쿠키란?
서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다.

쿠키의 특징

• 저장된 데이터 조각들은 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다.
• 이 때, 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 판단할 때 주로 사용됩니다.
• 이를 이용해 사용자의 로그인 상태를 유지가 가능한데 stateless한 HTTP 프로토콜에서 상태정보를 기억시켜주기 때문입니다.

웹 스토리지

웹 스토리지란?
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소입니다.

웹 스토리지의 특징

• 간단한 Key - Value 의 형태를 띄고 있습니다.
• 쿠키와 달리 자동 전송의 위험성이 없습니다.
• Origin 단위로 접근이 제한되는 특성 덕분에 CSRF로부터 안전합니다
• 쿠키보다 큰 저장 용량을 지원합니다.
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다.
• 오직 string 타입만 지원합니다.
• 두 가지 종류인 로컬 스토리지와 세션 스토리지로 나뉩니다.

로컬 스토리지

• 사용자가 데이터를 지우지 않는 이상 계속 브라우저에 데이터가 남아있습니다. (영구적)
• 단, 동일한 브라우저를 사용할 때만 해당됩니다.
• 지속적으로 필요한 데이터를 저장합니다. (로그인 정보를 저장해 자동 로그인을 하는 등)

세션 스토리지

• 데이터가 오리진 뿐 아니라 브라우저 탭에도 종속되기 때문에 윈도우나 브라우저 탭을 닫을경우 데이터가 삭제됩니다. (비영구적)
• 즉, 현재 떠 있는 탭 내에서만 유지됩니다.
• 일시적으로 필요한 데이터를 저장합니다. (일회용 로그인, 입력 폼 저장 등)

브라우저 저장소는 어떤 것이 있나요?
쿠키와 웹 스토리지가 있습니다.

둘의 차이점을 알고 있나요?
쿠키는 데이터가 네트워크 요청 시 서버로 전송되는데, 웹 스토리지는 서버로 전송되지 않습니다.
이런 차이 때문에 웹 스토리지가 쿠키보다 더 많은 데이터를 보관할 수 있습니다.
또, 쿠키는 서버가 HTTP 헤더를 통해 조작이 가능하지만 웹 스토리지는 스토리지 객체를 조작할 수 없습니다.
또, origin 단위로 접근을 제한하지 않는 쿠키에 반해 웹 스토리지는 origin 단위로 접근을 제한합니다.
그렇기 때문에 CSRF로부터 안전합니다.

웹 스토리지의 종류와 특징을 간단하게 말씀해주세요
웹 스토리지는 로컬 스토리지와 세션 스토리지로 나뉩니다.
로컬 스토리지는 데이터를 지우지 않는 이상 브라우저에 데이터가 영구적으로 남아있으며, 로그인 정보 등 지속적으로 필요한 데이터를 저장합니다.
세션 스토리지는 브라우저 탭을 닫을 때 데이터가 삭제되며, 일회용 로그인 등 일시적으로 필요한 데이터를 저장합니다.