HTML5 WebStorage(local 및 session)

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 커맨드라인 툴로 직접 해당 파일을 조회할 수 있다.

http://stackoverflow.com/questions/9669184/how-is-html5-webstorage-data-physically-stored

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

사용자가 직접 데이터를 삭제하기 전까지 영구적으로 보관된다.

만료 기간을 설정할 수 없다.

성능은 어떤가?

로컬 스토리지는 동기적으로 작동한다.

즉 로컬 스토리지에 값을 설정하거나 가져올 때에는 렌더링이 블락된다.

또한 로컬 스토리지는 File I/O를 발생하기 때문에 다른 작업에 비해 비용이 큰 편이다.

따라서, 빈번하게 많은 양의 데이터를 읽고 쓰거나, 1MB 이상의 큰 데이터를 쓰는 것은 피하는 것이 좋다.

참고:

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

http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/

위 포스트는 브라우저 캐시를 사용하는 것보다 로컬 스토리지에 저장해둔 것을 가져오는 게 더 빠르다는 내용이다.

25KB 크기의 스크립트를, 브라우저 캐시를 사용해 로드하는 것과,

로컬 스토리지에 저장해뒀다가 로드하는 것의 시간을 비교하는 방식으로 실험했다.

테스트 대상이었던 모든 모바일 기기에서 로컬 스토리지에서 불러오는 평균 속도가 더 빨랐다.

댓글 중에, 성능 분야에서 유명한 스티브 사우더스가 남긴 글이 있다.

로컬 스토리지는 페이지가 로드되기 전 데이터를 메모리에 올리는데, 실험에서는 이 시간을 고려하지 않았다는 의견이다.

다음 실험 결과를 지켜볼만 하다.

안전한가?

일단은 쿠키와 비교했을 때, 클라이언트의 디바이스에 직접 저장되고

네트워크로는 전송되지 않기 때문에 네트워크 레벨에서는 안전하다고 볼 수 있다.

하지만 평문으로 저장하는 경우, 그 값이 그대로 노출되어 XSS 등의 공격으로부터 안전하지 않다.

고려대학교 정보보호대학원에서 작성한,

'안전한 HTML5 로컬스토리지 구현에 대한 연구'라는 이름의 논문이 있다.

http://scholar.ndsl.kr/schArticleDetail.do?cn=JAKO201227935976492

(로그인 없이 다운로드 가능하다)

사용자로부터 받은 암호로 로컬 스토리지에 저장되는 데이터를 암호화한다는 아이디어다.

대칭키 방식으로 사용하며, 보안을 위해 도메인마다 랜덤하게 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