브라우저 저장소 비교 (localStorage, SessionStorage, Cookie)

HTML5에서 웹의 데이터를 저장할 자료구조 공간 스토리지 스펙을 제공한다.

그 공간은 키 : 밸류 쌍으로 데이터를 저장하고 키값을 통해 데이터에 접근할 수 있다.

이 웹스토리지에 포함되는 것이 바로 로컬스토리지와 세션스토리지 이다.

 

쿠키는 고인물이고, 웹스토리지가 5부터 등장

 

쿠키 대비 웹스토리지의 장점

 

1. 쿠키는 매번 서버로 전송됨

웹스토리지 저장된 데이터는 그냥 클라이언트에 존재, 서버로 전송은 자동으로는 이루어지지 않음

트래픽 비용 절감

 

2. 단순 문자열을 넘어 객체정보를 저장가능

브라우저의 지원여부는 확인 필요

 

3. 용량의 제한 없음

쿠키는 최대 4KB, 20개까지 한 사이트에서 저장 가능

모바일은 2.5mb, 데스크탑은 5mb-10mb

 

4. 영구저장가능

쿠키는 만료일자를 지정하게 되어 언젠가 제거된다. -> 다시보지않음 팝업창은 쿠키에 저장

 

 

로컬스토리지와 세션스토리지

 

로컬스토리지

저장한 데이터를 명시적으로 지우지 않는 이상 영구적 보관가능

브라우저를 종료해도 다음번 접속에도 그 데이터를 사용가능

지속적으로 필요한 데이터(자동로그인)은 로컬스토리지에 저장

 

세션스토리지

데이터가 지속적으로 보관되지 않는다.

브라우저를 종료하면 데이터도 같이 지워진다.

탭 브라우징(동일 도메인을 탭추가하여 접속) 해도 로그인 새로 해야함

잠깐 필요한 데이터는 세션스토리지(일회성 로그인/입력 폼 정보/ 비로그인 장바구니)