WEB STORAGE이란 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조다. 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이타를 조회하는 패턴이다.
내부적으로는 영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 분리되어 데이터 지속성에 따라 선택적으로 사용이 가능하다.
Web Storage는 웹 환경에 Cookie와 유사한 개념이다.
쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.
1-1) 웹스토리지 : 로컬스토리지, 세션스토리지.
1-2) 웹스토리지는 Key와 Value 형태로 이루어짐.
1-3) 웹스토리지는 클라이언트에 대한 정보를 저장.
1-4) 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.
로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장
ex) 자동 로그인 저장
세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제
ex) 입력 폼 정보 저장
3-1) 로컬&세션스토리지 장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.
3-2) 로컬&세션스토리지 장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)
3-3) 로컬&세션스토리지 단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가
쿠키는 만료 기한이 있는 Key, Value 형태의 저장소
4-1) 쿠키 장점 : 대부분의 브라우저가 지원
4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.
4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)
4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험
Web Storage vs cookie
서버전송
web storage는 데이터를 클라이언트에만 저장할 뿐 서버로 전송은 이루어지지 않는다.
cookie는 매번 서버로 전송된다.객체저장
Web Storage는 문자열 이외에도 구조화된 객체를 저장할 수 있다는 개발 편의성을 제공해준다.
단, 브라우저의 지원 여부를 확인해 봐야한다.용량제한
하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개, 최대 데이터 크기는 4KB.
web Storage는 용량제한이 없다. 쿠키는 개수와 용량에 있어 제한이 있다.만료일자
web storage는 한번 저장한 데이터는 영구적으로 존재한다.
쿠키는 만료일자를 지정하게 되어 있어 언젠가 사라진다.
LocalStorage? SessionStorage?
-
LocalStorage
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
도메인마다 로컬스토리지가 별도로 생성된다. Windows 전역 객체의 LocalStorage 컬렉션을 통해 저장과 조회가 이루어진다. -
SessionStorage
SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
Windows 전역 객체의 LocalStorage 컬렉션을 통해 저장과 조회가 이루어진다.
데이터 유지 측면
LocalStorage는 브라우저를 종료해도 데이터는 보관된다. 반면 SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다.
현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.
데이터 범위 측면
Web Storage는 데이터의 보안측면에서 도메인 단위로 별도 생성된다. 하지만 여기서 LocalStorage와 SessionStorage는 결정적인 차이가 있다.
LocalStorage는 도메인만 같으면 전역적으로 데이터가 공유되지만,
SessionStorage는 도메인이 같아도 브라우저가 다르면 데이터 공유가 안된다.
탭 브라우징이나 또 다른 브라우저를 실행했을 때, 서로 각각 SesssionStorage가 유지된다.
브라우저 컨텍스트가 다르기 때문이다.
다음의 글을 참고하였습니다.
