[Web] 브라우저 저장소 - LocalStorage, SessionStorage, Cookie

브라우저 저장소

클라이언트 웹 브라우저에 저장할 수 있는 기능으로, 쿠키(Cookie)와 웹 스토리지(WebStorage)로 나뉜다.

방문자의 웹사이트 방문 여부를 체크하기 위한 쿠키의 등장으로 시작되었으며, 쿠키의 적은 저장공간과 보안적인 문제, 성능 저하 문제를 해소하기 위해 웹 스토리지를 도입하였다.

웹 스토리지는 저장 범위, 삭제 시기에 따라 로컬 스토리지 (Local Storage), 세션 스토리지 (Session Storage)로 나뉜다.

 

Cookie

웹 서버가 생성하여 웹 브라우저로 전송하는 작은 데이터 조각

• 서버는 HTTP 프로토콜을 사용하여 데이터 조각을 전송하며, 웹 브라우저는 쿠키를 저장해 놓았다가 동일한 서버에 재요청 시, 저장된 데이터를 함께 전송한다.
• 즉, 쿠키는 두 요청이 동일한 브라우저에서 들어온 것인지 판단할 때 주로 사용한다.
• Stateless (무상태) 특성을 갖는 HTTP 프로토콜에서 상태 정보를 기억할 수 있다. (ex. 로그인 유지)

쿠키 저장 장소

사용자 기기의 지정된 파일에 쿠키를 저장 (ex. 크롬 웹 브라우저는 모든 쿠키를 "Cookies"라는 파일에 저장

 

쿠키의 기능

• 세션 관리 (Session management): 서버에 저장해야 할 정보 관리 (로그인 정보, 장바구니 등)
• 개인화 (Personalization): 사용자 선호, 테마 등의 세팅
• 트래킹 (Tracking): 사용자 행동을 기록하고 분석하는 용도

쿠키의 단점

• 저장 용량 제한 (4KB)
• 암호화 되지 않은 상태로 HTTP 요청에 사용하기 때문에 보안에 취약하다.
• 모든 HTTP 요청 헤더에 포함되어 있어, 웹 서비스 성능에 영향을 줄 수 있다.

Web Storage

쿠키의 저장공간, 보안, 성능 상의 문제를 해결하기 위해 등장한 브라우저 저장소.

• key, value 쌍으로 데이터를 저장하고, key를 기반으로 데이터를 조회하는 패턴이다.
• 영구저장소(LocalStorage)와 임시저장소(SessionStorage)로 데이터의 지속성을 구분할 수 있어, 응용환경에 맞는 선택이 가능하다.

쿠키와의 차이점

• Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지 않기 때문에, 네트워크 트래픽 비용을 줄여준다.
• Web Storage는 단순 문자열을 넘어 구조화된 객체를 저장할 수 있다.
• Web Storage는 용량의 제한이 없다.
• Web Storage는 영구 데이터 저장이 가능하다.

※ 쿠키는 만료일자를 지정해야 하므로, 언젠가 제거된다. 세션 쿠키(만료일자 지정하지 않은 쿠키)는 일반적으로 웹 브라우저를 닫을 때 삭제된다. 만료일자를 굉장히 멀게 하여 영구 쿠키를 설정할 수 있다.

 

Local Storage

• 영구 저장소로, 브라우저를 닫았다가 다시 열어도 계속 유지된다.
• 동일한 도메인에 전역적으로 공유가 가능하다.

Session Storage

• 임시 저장소로, 브라우저를 닫으면 삭제된다. (Reload는 유지)
• 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. (같은 사이트의 같은 도메인이어도, 브라우저가 다르면 브라우저 컨텍스트(=브라우저가 불러온 웹페이지)가 다르기 때문에, 서로 다른 영역이 됨)

※ 웹 서버에 저장하는 session과 달리, Session Storage는 로컬 브라우저에 저장된다.

 

 

References 

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie