웹 저장소 쿠키와 스토리지

* 틀린 내용이 있다면 언제든지 댓글에 남겨주세요. 환영합니다 🙆🏻‍♂️

 

개발자의 꿈을 꾸기 전에도 쿠키에 대한 존재는 알고 있었습니다. 저와 비슷한 연령대의 분들은 대부분 경험하셨을 것 같은데요. 약 10년전 컴퓨터의 사양이 좋지 않던 시절 어떻게든 인터넷 속도를 높이고 싶어서 브라우저의 쿠키와 캐시 등의 데이터를 지웠던 기억이 있습니다. 그렇다면 이 쿠키는 어떤 역할을 하는 건지 알아보겠습니다.

쿠키 (Cookie)

무상태성(stateless)과 비연결성(connectionless)

쿠키에 대해 알아보기 전에 HTTP의 특성에 대해서 잠깐 설명드리겠습니다. HTTP는 클라이언트와 통신이 끝나면 상태 정보를 저장하지 않는 무상태성(stateless),  요청(request)과 응답(response)이 끝나면 접속을 종료하는 비연결성(connectionless)의 특성이 있습니다. 따라서 사용자를 식별하고 정보를 저장하기 위해 쿠키가 만들어졌으며 서버에 요청할 때마다 같이 따라오기 때문에 쿠키는 최대 4kb의 용량 제한이 있습니다.

 

HTML5가 나오기 전 쿠키는 앱 또는 웹 사이트를 방문하는 유저들의 정보를 저장하는 주된 방법이었습니다. 쿠키는 사용자의 브라우저에 저장되고 키(key)-값(value) 저장소이며 문자열만 저장할 수 있는 제한이 있습니다. 

세션 쿠키(session cookies)

쿠키에 만료일이 포함되지 않으면 세션 쿠키(session cookies)로 간주됩니다. 세션 쿠키는 디스크에 저장되지 않고 메모리에 저장되어 브라우저나 탭이 닫히면 영구적으로 삭제 됩니다.

지속적 쿠키(persistent cookies)

반대로 만료일이 포함될 경우 지속적 쿠키(persistent cookies)로 간주됩니다. 디스크에 저장되어 수동으로 삭제하기 전까진 만료 기한까지 데이터가 저장 됩니다.

 

웹 스토리지 (Web Storage)

브라우저에 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소입니다. 쿠키의 여러 사용을 웹 스토리지(web storage)가 대체하게 되었습니다. 키(key)-값(value) 저장소이며 쿠키와 달리 HTTP 요청에서 데이터를 주고받을 필요가 없어서 서버에 부담을 덜어줍니다. 종류로는 로컬 스토리지(local storage)와 세션 스토리지(session storage)가 있습니다. 이 둘은 사용방법이 같지만 가장 큰 차이점은 영구성에 있습니다. 

로컬 스토리지(local storage)

도메인 단위로 생성이 되며 다른 도메인의 로컬 스토리지에는 접근이 불가능합니다. 또한 서로 다른 브라우저의 탭이라도 도메인이 같으면 같은 로컬 스토리지를 사용합니다. 브라우저를 종료해도 사용자의 디스크에 저장되어 데이터가 삭제되지 않으며 수동으로 지우지 않는한 영구적으로 저장이 됩니다.

세션 스토리지(session storage)

탭/윈도우 단위로 생성이 되며 도메인이 같아도 탭이 다르면 데이터에 접근이 불가능합니다. 브라우저나 탭을 닫을 시 데이터가 삭제가 되며 세션 스토리지끼리 서로 영향을 주지 않고 독립적으로 동작을 합니다.

저장소별 사용예

	세션 쿠키	지속적 쿠키	로컬 스토리지	세션 스토리지
사용예	은행 웹 사이트의 개인정보 인증, 회원가입 입력 폼, 보안영역 접속 등	좀더 나은 사용자 경험을 위한 사용기록 추적, 오늘 이 창 보지 않음 체크 등	개인 PC에 사용하는 자동 로그인 기능, 장바구니, 블로그 글 임시저장 등	일회성 로그인, 블로그 글 에디터의 자동저장 기능 등

마치며

프론트엔드 개발자라면 이런 저장소에 대해 알고 적절하게 사용할 수 있어야할 것 같습니다. 아직 경험이 많이 부족하여 SSR 구현 시 쿠키사용, 명확한 구분, 코드에 대한 개념이 부족하지만 어느정도 개념을 이해를 해놓으면 사용 시 좀 더 도움이 될 것 같아 글로 정리해보았습니다.

참고

[WEB] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지) - IT 엘도라도
웹프론트엔드 개발자라면 알아야 할 저장소 종류 4가지 - Taehoon(유튜브)
쿠키란 무엇인가 / 쿠키를 사용하는 이유 - KOBRE & KIM
로컬스토리지, 세션스토리지 - 제로초
쿠키 vs 로컬스토리지: 차이점은 무엇일까? - Erwinousy
쿠키, 세션 그리고 웹 스토리지 - hellozin
[HTTP] 쿠키/세션/캐시의 차이점은? - 는세 
쿠키와 세션 개념 - 라이언 서버