Browser Storage에 대해

Browser의 Storage에 대해 알아보자.

우선, 2가지의 Storage가 있다.

LocalStorage와 SessionStorage가 그것인데,

이 Storage들은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는

저장소이다.

프로젝트를 진행하면서 LocalStorage를 이용해 Redux 상태를 관리하기도 했고,

로그인 유무의 정보 등을 저장하기도 했다.

그때 LocalStorage를 사용했던 이유는, 페이지가 새로고침 되거나,

브라우저를 종료하는 등으로 인해 데이터가 사라지는 것을 해결하고자 사용했다.

이렇듯, LocalStorage는 내가 삭제하기 전에는 영구적으로 저장되는 영구 저장소이고,

SessionStorage는 브라우저가 종료되면 데이터가 삭제되는 임시 저장소이다.

또한, LocalStorage는 도메인만 같다면 데이터가 전역적으로 공유되지만,

SessionStorage는 브라우저마다 (새 창, 새 탭 등) 각기 다른 저장소를 가지게 된다.

이런 Browser의 Storage를 사용하다 보면, Cookie도 눈에 띄게 되는데,

Browser Storage와 Cookie의 차이는 무엇일까?

1. 쿠키는 요청시마다 서버로 전송된다.
   • 쿠키가 설정되어 있다면, 모든 요청마다 쿠키를 서버에 전송한다.
   • Storage는 클라이언트에 데이터가 존재하기만 할 뿐, 서버에 전송되지 않는다.
2. Storage는 객체 정보를 저장할 수 있다.
   • 단순 문자열이 아닌, 구조화된 객체를 저장함으로써 개발 편의성을 높인다.
3. Storage는 용량 제한이 없다.
   • Cookie는 20개, 그리고 4KB로 개수와 크기의 제한이 있다.
4. Storage는 데이터의 영구 저장이 가능하다.
   • Cookie는 만료 일자를 지정하게 되므로, 언젠가는 만료되어 삭제된다. 만료 일자를 지정하지 않으면 → SessionCookie가 된다.
   • LocalStorage는 따로 삭제하기 전까지, SessionStorage는 브라우저가 종료되거나 새로고침 되기 전까지 영구적으로 저장된다.

Browser Storage와 Cookie를 비교해 무엇이 특출나게 좋다고 말할 수는 없으나,

매 요청마다 서버로 데이터가 전송되는 Cookie와 달리 Browser Storage는

네트워크 트래픽 비용 절감 효과를 기대할 수 있다.