Cookie & Web Storage

📌 쿠키와 차이점?

1️⃣ 네트워크 요청 시

웹 사이트에서 cookie 를 설정하면 매 요청마다 헤더에 담겨서 서버로 전송됩니다.

하지만 web storage 는 저장된 데이터가 클라이언트에 존재하며 서버로 전송되지 않습니다.

이를 통해 네트워크 트래픽 비용을 줄일 수 있습니다.

2️⃣ HTTP 헤더 조작

또한 스토리지 객체는 서버가 HTTP 헤더를 통해 조작할 수 없습니다.

web storage 객체는 모두 JS 내에서 수행됩니다.

3️⃣ 저장용량

쿠키는 최대 20개에 각 쿠키에 4KB 의 용량 제한이 있는 반면에

web storage 는 브라우저와 기기에 따라 다르지만

모바일은 2MB , 데스크탑은 5MB ~ 10MB 라고 생각하면 됩니다.

 

📌 Local Storage & Session Storage

HTML5 에 추가된 Web Storage 는 위 두 가지 형태의 저장소를 제공합니다.

두 스토리지 객체 모두 도메인, 프로토콜, 포트 로 정의되는 오리진 에 묶여 있습니다.

따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.

 

💡 Origin 이란?

Origin 은 scheme, host, port 가 동일한 URI 를 말합니다.
예를 들어 다음 URI 들은 모두 동일한 origin 입니다.

http://example.com/
http://example.com:80/
http://example.com/path/file

출처 : https://www.ietf.org/rfc/rfc6454.txt

 

Local Storage

local storage 는 사용자가 지우지 않는 이상 브라우저에 계속 남아있습니다.

또한 origin 이 같을 경우 데이터는 모든 탭과 창에서 공유됩니다.

자동 로그인 과 같은 기능을 구현할 때 유용합니다.

Session Storage

session storage 의 경우 같은 사이트의 같은 도메인이라 하더라도

브라우저가 다르면 서로 다른 영역이 됩니다.

이는 도메인만 같으면 전역적으로 공유 가능한 Local Storage 와 구분되는 특징입니다.

따라서 브라우저 탭을 닫을 경우 제거됩니다.

일회성 로그인 과 같은 기능을 구현할 때 유용합니다.

 

📌 참고자료

[web] LocalStorage, SessionStorage, Cookie의 차이점

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키