🌐 브라우저 저장소
브라우저 저장소는 클라이언트 웹 브라우저에 저장할 수 있는 기능이다.
브라우저 저장소는 Cookie와 Web Storage로 구분된다.
🍪 Cookie (쿠키)
Cookie는 로컬에 저장되는 데이터 파일이며 한 개의 쿠키는 최대 4KB로 제한되어 있다.
key-value 구조로 데이터를 저장하고 key로 데이터를 조회한다.
서버와 지속적인 데이터 교환을 하기위해 만들어 졌으며 만료시간 동안 쿠키 데이터를 유지한다.
서버와 통신시 쿠키 데이터를 Header에 담아서 같이 보내 쿠키 데이터로 서버에서 클라이언트를 판별한다.
🖥️ Web Storage(웹 저장소)
Web Storage는 HTML5에 포함되어 있는 웹 데이터를 클라이언트에 저장할 수 있는 저장소이며 쿠키와 마찬가지로 key-value 구조로 데이터를 저장하고 key로 데이터를 조회한다.
Web Storage는 Local Storage와 Session Storage로 구성되어 있다.
🌐 Local Storage(로컬 저장소)
Local Storage는 브라우저를 종료해도 데이터를 영구적으로 보관한다.
또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있다.
💾 Session Storage(세션 저장소)
Session Storage는 브라우저가 종료되면 데이터가 삭제된다.
브라우저 세션이 유지되는 동안만 데이터를 가지고 있는다.
또한, 도메인이 같더라도 브라우저가 다르면 데이터가 공유되지 않는다.
💡 그렇다면 Cookie와 Web Storage의 차이점은 무엇인가?
1) Cookie에 경우 앞서 말했듯이 서버와 지속적인 데이터 교환을 하기 때문에 모든 요청은 쿠키 정보를 포함해서 서버에 전송된다. 이는 불필요한 트래픽을 발생시키는 문제가 있다.
반대로 Web Storage는 데이터가 클라이언트에 저장만 되어 있고 서버로 전송은 이루어지지 않는다.
2) Web Storage는 용량의 제한이 없는 반면에 Cookie는 한 개의 쿠키가 최대 4KB, 총 개수는 300개, 하나의 도메인 당 20개로 제한이 되어있다.
