브라우저 저장소(쿠키, 웹스토리지)

Cookie와 Web storage는 둘 다 클라이언트 측에서 데이터를 저장하는 방법입니다.

Cookie와 Web storage에 대해 각각 알아본 후 차이점을 알아보겠습니다.

 

1. Cookie

쿠키는 사용자가 웹사이트를 방문할 때 브라우저에 저장되는 작은 데이터 조각입니다.

유저 인증, 사용자 프로필 정보, 쇼핑카트 등 다양한 목적으로 사용될 수 있습니다.

만료일이 지나거나 브라우저가 닫히면 삭제될 수 있으며, 브라우저의 요청 헤더에 쿠키를 포함하여 서버로 전송됩니다.

 

2. Web Storage

웹 스토리지(Web Storage)는 쿠키의 단점을 보완하여 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소입니다. 데이터의 지속성에 따라 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 나뉩니다.

 

2-1 Local Storage(영구 저장소)

로컬 스토리지는 클라이언트 측에서 데이터를 저장하기 위한 기술로, 브라우저에 지속적으로 저장됩니다.

데이터는 브라우저 창을 닫아도 계속해서 유지됩니다. 로컬 스토리지는 오프라인 상태에서도 사용할 수 있으며, 

브라우저의 JS코드에서 직접 액세스할 수 있습니다. 또한 도메인마다 별도로 Local Storage가 생성됩니다. 

도메인만 같다면 전역적으로 공유가 가능합니다.

로컬스토리지는 주로 자동 로그인을 할때 사용됩니다.

 

2-2 Session Storage(임시 저장소)

세션 스토리지는 로컬 스토리지와 유사하지만, 데이터가 브라우저 창 또는 탭이 열려 있는 동안에만 유지됩니다.

브라우저가 닫히면 데이터는 삭제됩니다. 세션스토리지는 페이지 전환 및 새로고침에 대한 영향을 받지 않으며, 브라우저의 JS코드에서 직접 액세스 할 수 있습니다.

도메인마다 별도로 생성되는 점은 LocalStorage와 같지만, 같은 사이트의 같은도메인이라도 브라우저가 다르면 서로 다른 영역이 됩니다. 이는 브라우저 컨텍스트가 다르기 때문입니다.

일회성 로그인을 할때 사용됩니다.

 

---

두 기술(Cookie와 Web Storage)의 차이점

1. 저장 용량

쿠키 : 최대 4KB 
로컬 스토리지 : 5MB이상
세션 스토리지 : 브라우저 세션이 종료될때까지 데이터 보유

 

2. 서버로 전송 여부

쿠키 : HTTP 요청에 대해 자동으로 서버로 전송 
웹스토리지 : 클라이언트에 저장만 할 뿐 서버로 자동으로 전송X 

 

3. 수명

쿠키 : 만료날짜를 지정하여 수명을 설정 가능(만약, 만료날짜가 지정되지 않으면 쿠키는 브라우저 세션이 종료될때까지 유지)
로컬 스토리지 : 영구적으로 데이터 저장
세션 스토리지 : 브라우저 창이 열려있는 동안 데이터 저장

 

4. 사용 용도

쿠키 : 사용자 식별, 사용자 상태 관리, 광고 추적 등
로컬 스토리지 : 자동 로그인
세션 스토리지 : 장바구니, 일회성 로그인

---

요약

쿠키와 웹스토리지는 둘 다 클라이언트 측에서 데이터를 저장하는 방법입니다. 

 

쿠키는 작은 용량의 데이터를 저장하고, 서버로 자동으로 전송되며, 만료날짜를 설정할 수 있습니다.

 

웹스토리지는 큰 용량의 데이터를 저장하고, 서버로 자동으로 전송되지 않으며, 수명을 명시적으로 설정하지 않으면 영구적으로 데이터를 저장합니다.

 

 

WebStorage는 지속성에 따라 영구저장소(LocalStorage)와 임시저장소(SessionStorage)로 구분할 수 있습니다.

 

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

도메인마다 별도로 LocalStorage가 생성되며, 도메인만 같다면 전역적으로 공유가 가능합니다.

 

SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재합니다.

도메인마다 별도로 생성되는 점은 LocalStorage와 같지만, 같은 사이트의 도메인이라도 브라우저가 다르면 서로 다른 영역이 됩니다. 이는 브라우저 컨텍스트가 다르기 때문입니다.

 

이처럼 WebStorage는 영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 구분되기 때문에, 데이터의 지속성에 따라 선택이 가능하다.