웹스토리지
태그 :
- 개념
- - Key-Value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴. - HTML5 표준에 포함되는 키/값 쌍자료 구조 기반의.Client-Side 데이터 저장 스펙
I. 웹클라이언트 데이터 저장 기능, HTML5의 Web Storage 개요
가. 웹스토리지(Web Storage) 정의
- Key-Value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴.
- HTML5 표준에 포함되는 키/값 쌍자료 구조 기반의.Client-Side 데이터 저장 스펙
나. 웹스토리지 주요 특징
- 웹스토리지에 저장된 데이터는 서버로 전송되지 않으며, 용량의 제한이 없고 만료기간도 없음
- 웹스토리지는 다양한 제약사항을 극복하여, Http Cookie 또는 자바 스크립트를 통하여 이루어지던 Client-side에서의 데이터 저장을 기존보다 편리하게 해줄 수 있는 표준임
II. 웹스토리지 유형
가. Session Storage
1) 도메인마다 따로 생성.
2) 윈도우(window 객체)와 같은 유효범위와 생존기간. (같은 도메인이라도 윈도우마다 따로 생성.)
3) 윈도우 복제로 생성된 경우 같은 값을 가진 세션 스토리지 복제.
4) 새로 생성된 윈도우와 기존 윈도우의 세션 스토리지는 상호 영향 없음.
나. Local Storage
1) 도메인마다 따로 생성.
2) 사용자가 명시적으로 지우지 않는 한 영구적 저장(지속기간제한없음)
3) 도메인이 다르면 서로의 로컬 스토리지에 접근 불가능
- 예. hi.croute.me와 hello.croute.me는 다른 로컬 스토리지
4) 같은 도메인은 모두 같은 로컬 스토리지를 보유.(접근한다.)
- 예.croute.me에 소속된 웹페이지는 동일한 로컬스토리지
5) Cookie를 이용한 사이트 고유 설정 정보등을 대신하기에 적당.
III. Http Cookie 와 HTML5 Web Storage 비교
구분 |
Web Storage |
Cookie |
정의 |
HTML 5 표준에 포함되는 키/값 쌍 자료구조 기반의 Client-Side 데이터 저장 스펙 |
Stateless 특성을 가지는 http 프로토콜의 단점을 극복하기 위하여, http 헤더를 이용하여 클라이언트 사이드에 정보를 저장하는 기법 |
서버전송 |
저장된 데이터가 클라이언트에 존재 할 뿐 서버로 전송 없음 - 네트워크 트래픽 감소 효과 |
매번 서버로 전송 -개인정보유출가능성 |
응답시간 |
http 요청시 header에 정보가 포함되지 않음 -성능 개선 효과 |
http 요청시 header 전송 -응답시간 지연 |
용량 |
용량의 제한 없음 |
개수와 용량의 제한 (4KB) |
객체저장 |
객체저장가능 - 개발의 편의성 |
단순스크립트만 저장가능 |
데이터저장 |
영구데이터저장가능 |
만료일자까지만 저장 |
유형 |
로컬 스토리지, 세션 스토리지 |
단일쿠키, 다중 값 쿠키 등 |
성능측면 |
http 요청시 header에 정보가 포함되지 않으므로, 성능을 개선 할 수 있음 |
http 요청시 header에 매번 같은 내용이 포함되어 성능에 영향을 미칠 수 있음 |
지원 브라우저 |
모바일에서 대부분 지원됨 |
모든 브라우저에서 지원 |
안정성측면 |
로컬에 보관됨으로 보안성이 좋은편임 |
안정한 상태이지만, header를 통해 주요정보가 노출될 수 있음 |
사이즈 |
브라우저 마다 다르나, 기본적으로 제한이 없다고 봐도 무방함(5~10MB) |
4KB |
멀티도메인에서 사용여부 |
다른 도메인에서는 전혀동작하지않음 (www.example.com과 m.example.com에서는 저장값을 공유할 수 없음) |
설정에 따라서 2차 도메인의 공유를 할 수 있는 방법이 있음 |
기능의 완전성 |
HTML5 API에 Draft 상태로 포함됨 |
완전한 상태 |
주요 적용대상 |
웹어플리케이션의 데이터 저장소로 활용이 가능 |
특정사이트에 방문한 고객의 정보를 유지시키기 위함. 웹응용프로그램의 연속성을 유지시킴 |
유사기술 |
Application Cache(HTML5의 Offline 지원 API라는 공통점이 있음) |
Session |
공통점 |
Key와 value로 구성된 자료구조임 |
IV. Web Storage의 적용
- 개별 도메인에서 사용할 경우 성능 / 안정성 / 용량 등 다양한 장점.
- 브라우저의 지원여부를 파악한 후 사용 고려.
- 모바일 웹 애플리케이션 개발에 많이 활용될 것으로 예상됨. “끝”
[참고] HTML5
- W3C(World Wide Web Consortium)에서 만들고 있는 차세대 웹표준으로 단순 텍스트와 하이퍼링크만 표시하던 HTML에서 복잡한 어플리케이션까지 제공할 수 있는 웹 어플리케이션 플랫폼으로 진화한 형태이다.
- 2014년 최종 표준을 배포할 예정.
기능 |
내용 |
Web Form |
사용자입력 확장 제공 |
Canvas |
2차원 그래픽을 그리기 위한 API |
Geolocation |
디바이스의 지리적 위치 정보를 제공하는 API |
Offline Web application |
인터넷이 연결되지 않는 상태에서 웹 어플리케이션이 구동하도록 하는 기술 |
Web Storage |
웹 클라이언트가 데이터를 저장하는 기능 |
Web Worker |
다중 작업이 가능한 쓰레드 기능을 지원하는 API |