[HTML5]로컬자원활용,그 위치와 용량 그리고 유효기간은?
HTML5 에는 로컬 자원을 활용하는 유용한 기능들이 포함되어 있다
대표적인 예로 웹 스토로지, 웹 데이타베이스, 어플리케이션 캐시등을 들 수 있다
이 블로그에서 이 들 스펙에 대해 간략하게 다루었었다
: [HTML5] Web Storage
: [HTML5] 오프라인 웹 어플리케이션
: [HTML5] Web SQL Database
이와같은 로컬 자원을 활용하면 웹 응용프로그램의 사용성, 응답성, 성능등과 같은 전반적인 효율성을 꾀할 수 있어 많은 활용도가 기대된다
이들 기술의 기능적 구현에 대한 이해와 더불어 환경에 대한 이해도 같이 해 두면 유용할 것이다
이전 글에서는 기술의 개요와 구현에 대해 살펴보았다면 이 글에서는 로컬 자원의 저장 위치와 한계 용량, 지속 기간 등의 환경적 요인들을 살펴 보고 이들 기술의 이해의 폭을 넓히고자 한다
그럼 이제부터 HTML5에서 로컬 자원을 어디에, 얼마나, 언제까지 저장하는지 살펴 보도록 하자.
참고로 로컬 영역에 대한 내용이다 보니 클라이언트 PC의 OS와 브라우저의 종류, 버전에 따라 내용이 조금씩 다를 수 있음을 밝혀 둔다. 그리고 가정을 하건대, 로컬 디스크의 용량은 무제한이라고 가정해 둔다. 기술별 최대 용량을 따져보는 와중에 컴퓨터 하드디스크 자체에 여유공간이 없다면 아무런 소용이 없기 때문이다
이 글은 윈도우 XP를 사용하고 IE8, 그외 브라우저(크롬,사파리등)은 현재시점(2010.10.19) 최신버전을 사용하고 있는 것을 기준으로 하고 있다
어디에 저장되는가?
대부분의 로컬자원은 OS의 사용자별 어플리케이션 데이터 공간에 저장된다
윈도우 XP에서는 'C:\Documents and Settings\사용자계정\Local Settings\Application Data' 가 어플리케이션 데이터를 저장하는 공간이며 이 디렉터리 하위에 있는 각 브라우저별 폴더에 로컬자원이 저장된다
윈도우에서 'C:\Documents and Settings\사용자계정' 의 경로는 %userprofile%로 대체 된다
LocalStorage
크롬: %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\Local Storage
사파리: %userprofile%\Local Settings\Application Data\Apple Computer\Safari\LocalStorage
파폭: %userprofile%\mkex\Application Data\Mozilla\Firefox\Profiles\xxx.default\webappsstore.sqlite 파일
오페라: %userprofile%\Application Data\Opera\Opera\pstorage
IE8: %userprofile%\Local Settings\Application Data\Microsoft\Internet Explorer\DOMStore
SessionStorage
세션스토로지의 경우 브라우저 프로세스의 메모리 영역에 저장되므로 물리적인 시스템 디렉터리에 저장되지 않는다. 따라서 데이터 저장을 위한 별도의 디렉터리 경로가 없다
Web SQL Database
크롬: %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\databases
사파리: %userprofile%\Local Settings\Application Data\Apple Computer\Safari\Databases
파폭: 지원되지 않음
오페라: %userprofile%\Application Data\Opera\Opera\pstorage
Application Cache
크롬: %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\Application Cache
사파리: %userprofile%\Local Settings\Application Data\Apple Computer\Safari\ApplicationCache.db 파일
파폭: %userprofile%\Local Settings\Application Data\Mozilla\Firefox\Profiles\xxxxx.default\OfflineCache
오페라: %userprofile%\Local Settings\Application Data\Opera\Opera\application_cache
얼마나 저장되는가?
LocalStorage
로컬스토로지의 경우 브라우저마다 최대 저장용량이 다를 수 있다. 더 엄밀히 말하면 브라우저, 도메인마다 최대 용량이 다를 수 있다. 로컬스토로지는 같은 도메인 정책보안을 따르기 때문에 최대 용량 역시 도메인별로 한정을 하고 있다. 예를 들어 파이어폭스는 도메인당 최대 5MB 까지 가능하다
표준 스펙에 의하면 5MB를 최대 용량으로 권장하고 있으니 대체로 다른 브라우저도 이와 비슷할 것으로 보인다. 만일 한 도메인에 localStorage의 값을 5MB 이상 저장해야 한다면 브라우저가 이를 지원하는지 따져봐야 한다. (IE8의 경우 도메인당 10MB를 지원하는 것 같다)
(기존 쿠키가 4KB로 제한을 둔 것에 비하면 5MB 공간은 웹 환경에서 상당량이라 할 수 있다)
SessionStorage
세션스토로지의 경우 전역적인 공간이 아닌 브라우저 컨텍스트 영역에 저장되므로 브라우저 프로세스, 메모리와 연관이 있다. 이런 특징에 기인했는지 최대용량에 대한 언급을 찾을 수 없다. 다시 말해 브라우저 자체적으로 용량에 대한 제한을 두는지 localStorage 와 합쳐서 도메인당 용량을 계산하는지 아니면 브라우저 컨텍스트에서 사용 가능한 시스템의 메모리 크기에 의존하는지 등에 대한 언급은 없지만 개인적으로는 후자, 즉 브라우저 프로세스가 사용하는 시스템 메모리 크기에 의존하지 않을까 예상해 본다
Web SQL Database
웹 데이터베이스 용량의 기준은 LocalStorage와 개념적으로 유사하다.
즉 브라우저별로 최대 용량이 다를 수 있으며 도메인 단위로 관리된다.
그러나 LocalStorage 비해 용량의 유연성이 더 크다. 다시말해 더 큰 크기의 데이터저장이 가능하다는 것이다
HTML5 표준 사양에는 DB 용량에 대한 규정을 별도로 두지 않고 있으며 브라우저의 정책에 따라 DB용량의 기준이 다를 수 있다는 것을 명심하자. DB를 생성하는 openDatabase 함수의 estimatedSize 매개변수에 생성하고자 하는 DB의 크기를 바이트 단위로 지정할 수 있는데 이 크기는 DB의 대략적인 크기를 지정하는 것으로 브라우저마다 그 적용이 다를 수 있다는 것이다.
openDatabase(in DOMString name, in DOMString version, in DOMString displayName,
in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);
사파리 브라우저를 통해 DB 용량에 대한 내용을 체크 해 보자
다음 코드와 같이 기가(GB)단위의 큰 DB를 생성한다
var db = window.openDatabase("myDB","1.0", "테스트용DB", 1024*1024*1024);
사파리에서 위 코드를 실행하면 다음 그림과 같이 허용할 것인지 대화상자가 나오고 사용자가 허용하면 정상적으로 DB가 생성된다. (심지어 크롬과 오페라는 허용 여부를 묻지도 않고 생성해 준다)
그러나 브라우저마다 기본적으로 설정한 기본 크기는 있다. 사파리의 경우 기본 5MB 이며 환경설정에서 이를 변경할 수 있다. 아래화면은 '사파리의 기본설정->보안탭 화면' 인데 기본 5MB 설정에, 500M까지 변경 가능하다. 여기에서 설정한 기본크기 보다 작은 크기의 DB를 생성하면 자동으로 기본크기가 적용되며 반대로 기본크기보다 큰 DB를 생성하면 앞서 본것과 같이 허용을 묻는 대화상자가 나타나는 것이다
이때 openDatabase에서 명시한 DB크기가 설정되는 것이 아니라 브라우저의 임의의 계산식에 의해 좀더 넉넉한 공간을 확보하게 되는데 위 예에서 1G DB를 생성했는데 1.2G 로 잡힌 이유도 여기에 있다
이렇듯 사파리에서는 DB크기를 유연하게 관리하는 것으로 미루어보건대, 만일 기존에 생성된 DB의 크기보다 더 큰 데이터를 입력하려고 하면 자동으로 크기가 일정부분 확대될 것으로 예상된다
(일반적인 DBMS 가 그러한 것 처럼...)
참고로 기존에 생성된 DB의 크기를 다음과 같이 수동으로 변경이 가능하다.
아래 화면은 사파리에의서 기존에 생성된 DB를 도메인별로 나타내고 각 DB의 현재 크기와 최대 크기를 명시하고 있는 화면이다. 여기서 도메인별 DB 최대 크기를 사용자가 변경할 수 있다
크롬브라우저는 '옵션->고급설정탭->컨텐츠설정->쿠키->쿠키및기타사이트데이터표시'에서 확인 가능하다
오페라브라우저는 '설정->환경설정->고급설정탭->저장공간'에서 확인 가능하다
결론적으로 웹 데이타베이스의 용량은 특별히 제한을 가해 두지 않은 듯 하며 유연한 확장이 가능해 보인다
다만 브라우저마다 그 기준이 다를 수 있기 때문에 필요할 경우 브라우저 사양서을 확인하면 좋을 것이다
당연하겠지만 하드디스크의 용량을 넘어설 수 없으며 그게 아니더라도 너무 무리한 용량은 예상치 않은 동작을 유발할 수도 있다. 사파리의 경우 자동으로 계산되는 최대크기가 매우 가변적인다.
예를들어 10G로 생성하면 2.3G로 잡고 7G로 생성하면 3.4G로 잡고 100G로 잡으면 최대크기는 오히려 기본크기로 잡히는 등 예측할 수 없는 결과를 보여 주고 있다. 따라서 너무 무리한 크기 설정은 피하는 것이 좋으며 서버급 DB가 아닌 로컬 DB에서 이와같이 과도한 크기를 이용하는 시나리오가 있다면 설계를 잘 못한 것일 수도 있다. 그리고 최대크기라는 기준이 큰 의미가 없을 수도 있다. 사파리에서 최대크기를 명시하더라도 실제 데이터를 저장하고 있는 시스템 디렉터리 파일은 현재크기로만 존재한다. 그리고 데이터 입력이 증가할 수록 용량은 점점 확장된다.
결론적으로 특별히 제한을 가해 두지 않았다는 의미는 사용할 만큼의 충분한 공간을 제공한다 라는 의미로 해석하기 바란다
Application Cache
어플리케이션 캐시의 저장 용량을 따져보는 것은 어찌보면 무의미 할 수 있다
로컬스토로지나 웹데이타베이스와 같은 것은 저장소라는 개념이 명확해서 사용 가능한 공간, 용량이라는 개념을 적용시킬 수 있으나 어플리케이션 캐시는 이런 개념과는 조금 다르기 때문이다.
그러나 이것 역시 로컬의 어딘가에 저장되어 캐시 되기에 굳이 용량에 대한 관점으로 본다고 하면, 어플리케이션 캐시가 저장되는 시스템 하드디스크의 크기라고 말할 수 있겠다.
다만 IE의 임시인터넷파일과 같이 저장공간에 제한을 둘 수도 있는데 이것과 관련해서도 역시 각 브라우저 정책에 따른다는 것이다.
HTML5 스펙에서는 어플리케이션 캐시에 대한 디스크 공간을 다음과 같이 설명하고 있다.
User agents should consider applying constraints on disk usage of application caches.
User agents should allow users to see how much space each domain is using, and may offer the user the ability to delete specific application caches.
언제까지 저장되는가?
LocalStorage
로컬스토로지는 특수한 상황이 아니라면 영구적으로 데이터를 보관한다
특수한 상황이라 하면, 사용자가 직접 데이터를 삭제하거나 브라우저를 제거하거나 OS를 재설치하는 것을 말한다. 이러한 특수한 상황이 아니라면 데이터는 영구적으로 보관된다
SessionStorage
세션스토로지는 브라우저 창이 닫힐 때 까지 보관된다. 엄밀히 말하면 브라우저컨텍스트라는 일종의 프로세스 도메인이 활성화되어 있는 동안만 데이터가 유지된다. 쉽게 말해 브라우저 창이 열려 있는 동안 데이터가 보관 된다고 생각하면 되겠다
Web SQL Database
웹 데이터베이스는 LocalStorage와 같이 특수한 상황이 아니라면 영구적으로 데이터를 보관한다
Application Cache
어플리케이션 캐시에 보관되는 데이터의 유효기간을 따지는 것은 앞서 용량을 따지는 것보다 더 무의미하다
앞서 다른 기술들과 마찬가지로 특수한 상황이 아니라면 영구적으로 보관될 것이며 캐시를 업데이트 하거나 캐시 저장공간이 꽉 찾을 경우 덮어 쓰는 등의 시나리오에서 일부 갱신되거나 유실될 수 있을 것이다