웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.
둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다는 점이 다른 점입니다.
localStorage |
sessionStorage |
|---|---|
| 로컬에 도메인 별로 지속되는 storage | 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage |
| 오리진이 같은 탭, 창 전체에서 공유됩니다 | 오리진이 같은 브라우저 탭, iframe에서 공유됩니다. |
| 브라우저를 껐다 켜도 남아있습니다. | 페이지를 새로 고침 해도 남아있습니다. 하지만 탭이나 브라우저를 종료하면 사라집니다. |
| 값을 지우려면 직접 지워줘야합니다 (나는 지우기 직전까지 죽지않아) | 세션의 종료시 죽음을 맞이합니다. (난 세션이 끊기면 죽는다) |
그런데 이 session이라는 용어는 아주 우리가 일반적인 의미의 세션과는 좀 다릅니다.
보통 세션의 종료는 일반적으로 브라우저의 종료를 뜻합니다. 새 창을(프로세스)띄우건 새 탭을 띄우건 이는 세션종료를 의미하지 않습니다. 그러나 sessionStorage에서 의미하는 세션은 가장 작은 단위인 탭단위를 의미합니다.
따라서 탭마다 sessionStorage는 따로 배정되며 서로의 영역을 공유하지 않으며, 서로의 값을 침범할 수 도 없습니다. cookie가 가졌던 근본적인 문제인 도메인 같으면 항상 쿠키를 보낸다는 조건이 sessionStorage를 통해 해소하려한 흔적이 보입니다.
그런데 "쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?"라는 의문이 들 수 있습니다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같습니다.
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.
- 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.
- 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있습니다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.
추가적으로 쿠키과 스토리지의 비교를 표로 정리해보면 다음과 같습니다.
| cookie | webstorage | |
|---|---|---|
| 제한 | 용량제한, 시간제한, 갯수제한 존재 | 용량제한만 존재 |
| 시간 제한 설정 | 시간제한 설정가능 | 시간제한 설정 불가능 |
| 데이터형 | 문자열만 저장가능 | javascript 객체 저장가능 |
| 데이터 전송 | 모든 쿠키를 전송해야함, cookie를 가공함으로써 발생하는 side effect존재 | 개발자가 선택해서 전송할 수 있고 가공할 수도 있음 |
| 세션의 정의 | 같은 브라우저면 다른 탭이나 다른 창(프로세스)일지라도 같은 세션이라고 정의 | 같은 브라우저일지라도 sessionStorage의 경우 다른 탭이면 다른 세션이라고 정의 |
| 이벤트 | 이벤트 없음 | 이벤트 존재 |
특히 쿠키(Cookie)와 로컬스토리지(Local Storage)의 경우 둘 다 다른 목적을 가지고 있기 때문에 무엇이 옳다고 하기는 애매한 부분이 있습니다. 각각의 쓰임새에 따라 적합한 방법을 선택해야 합니다
우선 쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재합니다. 이와 달리 localStorage는 로컬 환경에서만 컨트롤됩니다.
이런 이유로 저장된 쿠키 데이터의 쓰임이 양쪽 모두이냐를 고려해야하며 만약 서버쪽 사용이 필수적이고 잦다면, 로컬 저장소가 아닌 클라이언트와 서버와의 인터렉션이 좀 더 효과적인 쿠키값을 사용하는 것이 좋을 수도 있습니다.
참고로 우리가 어떤 웹사이트에 들어가면 항상 보는 광고 7일 동안 보지 않기 역시 쿠키 기능인데, 왜냐하면 로컬 스토리지에는 기간 기능이 없기 때문입니다. 그렇지만 클라이언트에 데이터를 저장한다는 점으로서는 로컬스토리지는 매우 매력적인 기능입니다.
로컬 스토리지에 더해, 브라우저가 종료되면 자동으로 사라지는 쿠키를 재현하기 위해서 sessionStorage 가 도입되었는데요, 이를 통해 세션이 유지되는 동안만 필요한 데이터를 저장할 수 있게 되었습니다.
또한 쿠키는 domain별로 데이터가 분리되지만 같은 브라우저라면 값을 공유한데 반해, sessionStorage는 다른 탭이라면 데이터가 공유되지 않습니다.
만약 공유할 데이터는 localStorage에 넣으면 되므로 선택의 폭이 커졌습니다.