웹 스토리지와 쿠키

오늘은 브라우저의 저장 공간에 대해 알아보려고 합니다. 브라우저 저장공간은 서버가 아닌 클라이언트에 데이터를 저장 할 수 있도록 도와줍니다. 때문에 프론트엔드 수준의 개발이나 데이터 통신을 위해 필수적으로 알아두어야 하죠. 브라우저 저장소는 크게 3가지 즉 로컬 스토리지, 세션 스토리지, 쿠키 이렇게 나뉩니다. 그럼 이 세가지의 차이는 무엇일까요?

웹 스토리지

먼저 로컬 스토리지와 세션 스토리지는 웹 스토리지라 불립니다. 웹 스토리지와 쿠키의 기능은 유사하지만 쿠키의 경우 4kb만의 데이터만 저장 가능하죠. 반면 웹 스토리지는 5MB의 공간을 이용할 수 있습니다.

로컬 스토리지

로컬 스토리지는 반 영구적으로 브라우저가 데이터를 저장합니다. 이로서 브라우저가 종료되어도 데이터는 유지되죠. 그러나 도메인에 따라서 스토리지의 위치가 달라집니다. 즉 www.naver.com 의 로컬 스토리지에 저장한 데이터는 다른 도메인에서 접근 할 수 없죠.

세션 스토리지

세션 스토리지는 각 세션마다 데이터를 저장합니다. 즉 탭마다 데이터가 개별적으로 저장되는거죠. 로컬 스토리지와 차이점은 휘발성 데이터로 세션(탭)을 종료하면 데이터는 제거됩니다. 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없습니다.

마지막으로 스토리지가 아닌 쿠키를 알아볼까요?

쿠키

쿠키는 만료 기한이 있는 키-값 저장소입니다. 쿠키는 서버가 클라이언트를 구분하기 위해 클라이언트의 요청에 담아서 보내는 정보입니다. 즉 쿠키의 정보는 브라우저와 클라이언트 모두에 저장되어 브라우저에만 저장된 웹 스토리지와는 차이를 보이죠. 이렇게 굳이 쌍방향 모두에 저장하는 게 번거롭고 부하를 유발할 가능성이 있기 때문에 HTML 5에선 웹 스토리지를 차용했습니다. 이로서 로컬에만 정보를 저장해 서버의 부하를 줄인 거죠.