IT모아

HTML5 WebStorage(local 및 session) 본문

HTML5

HTML5 WebStorage(local 및 session)

아롱사태남 2015.03.14 23:06

WebStorage


'키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다

그리고 영구저장소(localStorage) 와 임시저장소(sessionStorage)를 따로 두어
데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다

Web Storage 는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다
사실 거의 차이가 없어 보이기도 하다. 다만 몇 가지 쿠키의 단점를 극복하는 개선점이 도입되었다

그럼 쿠키(Cookie)는?
쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구 이다
HTML 5 에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제하는 것은 아니다
HTML 5 환경에서도 여전히 쿠키를 이용할 수 있다
다만 어떤 것을 사용할 지는 사용자 선택의 몫이라 하겠다


Offline Web Application 과 비슷하게 갑자기 전원이 꺼진다거나 다시 PC 를 켰을때 이전에 작업한 데이터를 보존할수도 있고, 웹메일을 Web Storage 에 저장해 두었다가 읽는다거나, 서버의 많은 정보를 Client 에 저장해 둘 수 있습니다. 

Web Stroage 는 Client 의 disk 에 소량의 데이터를 저장하기 위한 Storage로 이전까지는 Cookie 를 사용했습니다만 Cookie 와는 다음과 같은 몇가지 다른 점이 있습니다.

크기에 제한이 없음.Cookie 는 4KB 로 제한이 있지만 Web Storage 는 제한이 없습니다.
서버로 보내지지 않음.Cookie 는 HTTP Request 에 의해서 자동으로 서버에 전송이 되었지만 Web Storage 는 서버로 전송되지 않습니다.
유효기간의 제한이 없음.Cookie 처럼 특정기간이 지나면 자동으로 삭제되지 않습니다.
JavaScript 객체를 저장할 수 있음.JavaScript 객체를 저장할 수 있습니다.


브라우저 지원 현황
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Web Storage 지원 표이다
(데스크탑 용 브라우저 기준이다)





어떤 제한이 있나?

- 동일 근원 정책을 기준으로 동작한다.
  즉, 프로토콜, 호스트, 포트 중 어느 하나라도 다르면, 각각 별도의 공간에 데이터가 저장된다.
  (document.domain 을 설정하더라도 공유되지 않는다)

- 디바이스마다 다르지만, 대부분 Origin 당 약 5MB 정도를 저장할 수 있다.
  문자열만 저장할 수 있으며, 2바이트 캐릭터(UTF-16)으로 저장된다.
  5메가를 넘어설 경우, QUOTA_EXCEEDED_ERR 오류가 발생한다.
  추가 공간을 요구할 수 없다.

- Safari아 iOS Safari에서 Private Browsing 옵션을 켜는 경우에는 사용할 수 없다.
  Private Browsing 을 사용하는 경우,
    - getItem()에서는 항상 null을 리턴하고,
    - setItem()에서는 QUOTA_EXCEEDED_ERR 을 발생한다.
    - clear()를 호출할 때에는 아무 동작을 수행하지 않는다. 에러를 발생하지도 않는다.


어디에 저장되나?

로컬 스토리지 데이터는 물리적으로 저장된다.
크롬은 localStorage로 SQLite 를 사용하며, Mac OS 에서는 해당 파일을 아래 디렉토리에 저장한다.

    ~/Library/Application Support/Google/Chrome/Default/Local Storage

데이터 파일은 `프로토콜_도메인_인덱스.localstorage` 라는 이름의 파일로 저장된다.
예를 들어 ohgyun.com에서 생성한 로컬 스토리지라면, `http_ohgyun.com_0.localstorage`라는 파일로 저장된다.

페이지가 로드되기 전에, 브라우저는 물리적으로 저장되어 있는 데이터를 읽어 메모리에 올려둔다.

참고:
sqlite3 커맨드라인 툴로 직접 해당 파일을 조회할 수 있다.


언제까지 저장되나? 만료 기간은?

사용자가 직접 데이터를 삭제하기 전까지 영구적으로 보관된다.
만료 기간을 설정할 수 없다.


성능은 어떤가?

로컬 스토리지는 동기적으로 작동한다.
즉 로컬 스토리지에 값을 설정하거나 가져올 때에는 렌더링이 블락된다.
또한 로컬 스토리지는 File I/O를 발생하기 때문에 다른 작업에 비해 비용이 큰 편이다.
따라서, 빈번하게 많은 양의 데이터를 읽고 쓰거나, 1MB 이상의 큰 데이터를 쓰는 것은 피하는 것이 좋다.

참고:
'모바일 디바이스에서 로컬 스토리지가 브라우저의 캐시보다 빠르다'는 포스트가 있다.

위 포스트는 브라우저 캐시를 사용하는 것보다 로컬 스토리지에 저장해둔 것을 가져오는 게 더 빠르다는 내용이다.
25KB 크기의 스크립트를, 브라우저 캐시를 사용해 로드하는 것과,
로컬 스토리지에 저장해뒀다가 로드하는 것의 시간을 비교하는 방식으로 실험했다.
테스트 대상이었던 모든 모바일 기기에서 로컬 스토리지에서 불러오는 평균 속도가 더 빨랐다.

댓글 중에, 성능 분야에서 유명한 스티브 사우더스가 남긴 글이 있다.
로컬 스토리지는 페이지가 로드되기 전 데이터를 메모리에 올리는데, 실험에서는 이 시간을 고려하지 않았다는 의견이다.
다음 실험 결과를 지켜볼만 하다.


안전한가?

일단은 쿠키와 비교했을 때, 클라이언트의 디바이스에 직접 저장되고
네트워크로는 전송되지 않기 때문에 네트워크 레벨에서는 안전하다고 볼 수 있다.
하지만 평문으로 저장하는 경우, 그 값이 그대로 노출되어 XSS 등의 공격으로부터 안전하지 않다.

고려대학교 정보보호대학원에서 작성한,
'안전한 HTML5 로컬스토리지 구현에 대한 연구'라는 이름의 논문이 있다.
(로그인 없이 다운로드 가능하다)

사용자로부터 받은 암호로 로컬 스토리지에 저장되는 데이터를 암호화한다는 아이디어다.
대칭키 방식으로 사용하며, 보안을 위해 도메인마다 랜덤하게 salt가 생성되도록 하는 방식이다.

암호화/복호화 비용이 꽤 클 것 같은데, 논문에서는 성능 차이가 거의 없다는 결론이다.
암호화할 레코드의 개수를 최대 10만 번까지 시도하며 걸린 시간의 평균값으로 비교를 했는데,
레코드의 크기에 대한 언급이 없고 특정 PC에서만의 결과라 신뢰하기엔 좀 조심스럽다.

아이디어는 괜찮은 것 같은데, 모바일에서의 성능이 궁금하기도 하고,
실제로 로컬 스토리지에 민감한 데이터를 저장하는 경우에는 어떤 게 있을지도 궁금하다.

일단은, 보안이 민감한 데이터는 평문으로 넣지 않는게 (당연하지만) 좋겠다.

- 출처 : http://ohgyun.com/417

사용법 예시

데이터 저장시 

localStorage.setItem(key,value);

데이터 추출시

localStorage.getItem(key,value);


localStorage 초기화

localStorage.clear()l


데이터 삭제시

localStorage.removeItem();


자바에서 Hashtable을 생각하시면 이해하기 쉬울듯 하네요 ^^ 

위에서 처럼 HTML5가 아직은 보안에 취약하다고 하니.. 중요한 데이터가 아닐 시 이용할것을 ....






더 많은 HTML5 를 보고싶으시다면 

아래 참조

http://www.sqler.com/396957

'HTML5' 카테고리의 다른 글

HTML5 col & colgroup 태그  (0) 2015.04.16
HTML5 WebStorage(local 및 session)  (0) 2015.03.14
iframe 속성 및 사용법(parent)  (0) 2015.02.02
크롬에서 배경이미지,배경색을 인쇄,프린트 하는 방법!!  (0) 2014.06.04
TABLE 속성  (0) 2014.03.24
0 Comments
댓글쓰기 폼