[TIL] 로컬 스토리지, 세션 스토리지 그리고 쿠키

 

지금 진행 중인 프로젝트에서는 쿠키를 사용하여 데이터를 활용한 적이 있습니다. 이 전의 프로젝트에서는 로컬 스토리지에 데이터를 담았던 적이 있구요. 하지만 이렇게 활용하다보니, 도대체 로컬 스토리지와 쿠키의 차이점이 뭘까?라는 의문이 들었습니다. 오늘의 포스팅은 바로 이 의문점을 해결하는 것으로 이루어져 있습니다.

 

1. 브라우저의 데이터를 컴퓨터에 기록하는 방식

 

로컬 스토리지, 세션 스토리지 그리고 쿠키는 모두 인터넷을 하면서 발생하는 데이터를 컴퓨터에 기록하는 방식입니다. 이 중에서 로컬 스토리지와 세션 스토리지는 HTML5 에서 추가된 저장소라고 합니다. 그렇다면, HTML5 이전에는 어디에 데이터를 저장했을까요? 눈치 빠른 분들은 아셨겠지만, 바로 쿠키에 저장했다고 합니다.

 

1) 쿠키 

 

쿠키는 만료 기한이 있는 키-밸류 저장소 입니다. 쿠키는 최대 4KB의 데이터를 저장할 수 있는 브라우저 내의 저장소입니다. 쿠키는 매 요청마다 서버로 쿠키가 같이 전송된다고 합니다. 이는 HTTP 통신의 특성 때문인데요, HTTP 통신은 상태를 가지고 있지 않기 때문입니다. 이게 무슨 말인가 하면, 브라우저에서 서버로 데이터를 요청하는 GET 요청을 보낼 때, 서버는 그 자체만으로는 요청이 누구에게서 오는지 알 수 없습니다. 이때 쿠키에 나에 대한 정보를 담아 서버로 요청하게 된다면, 서버는 요청의 주체가 누구인지를 알게 되고 이에 맞는 데이터를 전송할 수 있습니다. 쿠키는 이처럼 서버와 클라이언트간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 매 요청마다 서버로 전송되게 됩니다.

 

하지만 쿠키는 이로 인해 문제가 발생하기도 합니다. 쿠키의 용량은 앞서 말씀드렸던 것처럼 4KB에 해당합니다. 이 4KB 를 다 채운 요청이 계속 오고 간다고 할 때, 필요한 요청 뿐만이 아니라 불필요한 요청도 반복적으로 주고 받게 되는데, 이는 브라우저의 효율성을 생각한다면 바람직한 요청이 아닙니다. 이를 해결하기 위해 HTML5 에서 로컬 스토리지와 세션 스토리지가 등장하게 된 것이라고 생각하시면 됩니다. 

 

참고로 로컬 스토리지의 경우 용량이 브라우저나 도메인에 따라 차이가 존재하지만 보통은 2.5mb, 데스크탑의 경우 5mb 정도 된다고 합니다.

 

2) 로컬 스토리지

 

로컬 스토리지는 키-밸류로 데이터가 저장되는 저장소입니다. 따라서 로컬 스토리지에 데이터를 저장할 경우 키를 꼭 설정해주셔야 합니다. 여기에 저장할 수 있는 데이터의 종류는 string, boolean, number 등이 있지만, 저장되는 형태는 모두 string으로 저장됩니다. 따라서 저장을 하는 것은 어떠한 형태든 상관없지만, 후에 로컬 스토리지에 저장된 값을 불러와 활용할 경우에는 꼭 필요한 데이터 양식에 맞게끔 변환해주는 과정이 필요합니다.  

 

3) 세션 스토리지

 

세션 스토리지는 로컬 스토리지와 모든 메소드가 동일하지만, 데이터가 영구적으로 보관되는 로컬 스토리지와는 달리 데이터가 일시적으로 보관된다는 차이점이 존재하는 저장소입니다. 세션 스토리지에 담겨있는 정보는 브라우저가 종료될 때, 그 모든 데이터가 삭제됩니다.

 

 

4) 각각의 사용 예시

 

로컬 스토리지의 대표적 사용 예시로는 자동 로그인 기능이 존재합니다. 비로그인 장바구니와 같은 기능은 세션 스토리지에 데이터를 저장하게 되고, 팝업 창을 다시보지 않음 하게 될 경우에는 그 데이터를 쿠키에 저장한다고 합니다.

 

2. 마무리

 

오늘은 우리가 평소에 알게 모르게 많이 사용하고 있던 기능인 브라우저 저장소들에 대해 간략하게 알아보았습니다. 각각의 저장소들의 특징이 있는만큼 코딩을 할 때 각각의 특성에 맞는 로직을 잘 짜는 것이 웹 페이지의 성능과 UI, UX를 위해 꼭 필요하다는 생각이 듭니다. 

 

 

참고 블로그: www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048