브라우저 저장소들의 차이점 (로컬스토리지, 세션스토리지, 쿠키)

 브라우저 저장소는 크게 두 가지가 있습니다. 하나는 쿠키(cookie)이고 다른 하나는 웹 스토리지(web storage)입니다. 둘 모두 브라우저에 데이터를 저장하는 컨테이너라고 볼 수 있지만 몇 가지 다른 점이 있습니다.

 

 우선 쿠키는 매 요청(request)마다 서버로 전송이 되는 반면 웹 스토리지는 요청 시에도 서버로 전송되지 않습니다. 그렇기 때문에 일반적으로 웹스토리지가 쿠키보다 더 많은 데이터를 보관할 수 있습니다.

 

 개발자는 브라우저 내의 웹 스토리지 구성 방식을 설정할 수 있습니다. 그런데 서버는 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. 웹 스토리지 객체의 조작은 모두 자바스크립트 내에서 수행됩니다.

 웹스토리지 객체는 URL의 scheme(프로토콜) + host(도메인) + 포트로 정의되는 오리진(origin)에 묶여있습니다. 하나의 오리진은 다른 오리진의 웹 스토리지에 접근할 수 없습니다.

 

 웹 스토리지는 두 가지로 나눌 수 있습니다. 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)입니다. 둘은 모두 웹 스토리지 객체(web storage object)이며 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 이 때 키와 값 모두 문자열만을 받습니다. 문자열 외의 형태로 사용하기 위해선 JSON 객체를 사용하는 등의 별도의 공정이 필요합니다.

 

 로컬 스토리지와 세션 스토리지는 몇 가지 차이점이 있습니다. 우선 로컬 스토리지는 같은 오리진이라면 모든 탭과 창에서 데이터가 공유됩니다. 또한 브라우저나 OS가 재시작되더라도 데이터가 파기되지 않습니다. 반면 세션 스토리지는 현재 탭 내에서만 데이터가 유지됩니다. 현재 탭을 새로고침했을 때는 데이터가 사라지지 않지만 탭을 닫을 경우 사라집니다.

 

 한 가지 제가 헷갈렸던 부분을 설명하며 마무리하겠습니다. session storage와 http session는 전혀 다른 용어입니다. 둘 다 세션이라는 공통적인 말 때문에 혼동이 올 수 있습니다. 후자의 http session은 브라우저 저장소가 아닌 서버에 저장되는 사용자의 정보입니다. 쿠키와 자주 비교되는 용어입니다.

 

참고 자료 :

localStorage와 sessionStorage

쿠키와 세션 개념