브라우저 저장소(쿠키, 로컬 스토리지, 세션 스토리지) 개념 알아보기

HTML5를 기준으로 브라우저 저장소의 종류는 크게 두 종류로 나뉘는데요,

1. 쿠키
2. 웹 스토리지(로컬 스토리지, 세션 스토리지)

이 두 저장소에 대해 알아보는 시간을 갖겠습니다.

---

쿠키

쿠키가 등장한 이유

HTTP의 특징 중 하나는 무상태성입니다. 즉, 서버는 클라이언트에 대한 어떤 가정도 하지 않는다는 것을 의미합니다.

 

하지만 이런 무상태성이 단점으로 작용하는 때가 존재하는데요, 인증 기능이 포함된 서버와 통신을 한다고 가정해보겠습니다.

완전한 무상태성을 유지하기 위해선, 위와 같은 통신 절차를 따르게 됩니다. 즉, 클라이언트는 필요한 모든 정보를 보내야 하기 때문에 매번 동일한 인증 절차를 거쳐야합니다. 이런 방식은 번거롭다고 느껴지지 않나요?  

 

따라서 이런 HTTP의 무상태성을 통해 발생하는 문제점을 보완하기 위해 쿠키가 등장하였습니다.

 

쿠키란

쿠키는 클라이언트에 저장되는 작은 데이터 조각으로서, 웹사이트와 클라이언트 간의 상태 정보를 유지하고 전달하는 역할을 합니다. 그리고 서버는 이런 쿠키 정보를 통해 클라이언트를 식별할 수 있게 됩니다.

쿠키(cookie)란 이름이 붙은 이유는, 마치 사용자의 컴퓨터에 과자 부스러기가 남아 있는 것과 비슷하기 때문입니다.

 

이러한 쿠키는 다음과 같은 경우에 활용될 수 있습니다.

1. 세션 관리(Session management): 로그인 기능, 장바구니 정보를 저장하는 용도
2. 개인화(Personalization): 테마, 하루동안 보지 않기 기능 등과 같은 유저 개인 설정 정보를 저장하는 용도
3. 추적(Tracking): 분석, 기록을 위해 클라이언트 행동을 저장하는 용도

 

쿠키의 특징

쿠키는 몇 가지 특성을 가집니다. (아래는 주요한 특징만 나열한 것입니다)

• 쿠키의 정보는 항상 서버에 전송됩니다.

말 그대로 매 요청마다 쿠키가 함께 HTTP Request로 전송됩니다. 이는 네트워크 트래픽을 추가적으로 유발하기도 합니다.

• 쿠키는 용량 및 개수가 한정됩니다.

쿠키 표준안인 RFC 2109에 따르면 쿠키 개수는 최대 300개, 개별 쿠키에 대한 최대 크기는 4KB라고 명시되어 있습니다.

• 쿠키는 생명주기를 지정할 수 있습니다.

서버는 클라이언트에게 쿠키를 제공하면서 만료 날짜를 입력해 쿠키의 생명주기를 관리할 수 있습니다.

 

쿠키의 유형

쿠키는 두 가지 유형으로 분류되는데요,

 

1. 세션 쿠키(Session Cookie)

세션 쿠키의 경우 만료일을 포함하지 않으며, 브라우저나 탭이 열려있는 동안에만 저장됩니다.

 

2.지속 쿠키(Persistence Cookie)

지속 쿠키의 경우 만료일을 가지며, 만료일이 지나면 클라이언트의 디스크에서 삭제됩니다. 

---

웹 스토리지(web storage)

쿠키는 오랫동안 사용된 상태 관리 방법 중 하나이지만, 한계점도 분명 존재했습니다. 

• 저장 공간의 한계
• 문자열만 저장할 수 있다는 특징
• 매 HTTP 요청마다 같이 보내야한다는 특징

따라서 HTML5부터는 대안 솔루션으로 웹 스토리지라는 개념을 도입했습니다.

그리고 웹 스토리지는 생명주기에 따라 1. 로컬 스토리지, 2. 세션 스토리지로 나뉩니다. 

 

웹 스토리지의 장점

웹 스토리지는 쿠키와 대비해 다음과 같은 장점을 가집니다.

• 서버에 데이터 저장 필요 X
• 넉넉한 저장 공간
• 문자열 이외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능

 

 

로컬 스토리지와 세션 스토리지

로컬 스토리지와 세션 스토리지는 비슷하지만, 생명주기에 있어 차이점을 가진다고 했었는데요,

 

로컬 스토리지의 경우에는 데이터 영구 저장이 가능하고, 세션 스토리지의 경우에는 브라우저 탭/윈도우가 닫히면 초기화됩니다. 따라서 로컬 스토리지는 자동 로그인 등에 활용이 가능하고, 세션 스토리지는 일회성 로그인, 입력 폼 저장등에 활용이 가능합니다.

 

또한 로컬 스토리지는 같은 도메인이라면 여러 탭에서 접근이 가능하나, 세션 스토리지의 경우 같은 도메인이라도 세션이 다르면 접근할 수 없습니다.

 

 

---

참고자료

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

https://erwinousy.medium.com/%EC%BF%A0%ED%82%A4-vs-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-28b8db2ca7b2

https://velog.io/@hs0217/%EC%BF%A0%ED%82%A4-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80