HTML5 Rocks

HTML5 Rocks

HTML5 특징

저장소

웹 개발자는 사용자와 관련된 무언가를 저장해야겠다고 생각하면 바로 서버로의 업로드를 떠올립니다. 하지만 클라이언트 장비에 애플리케이션이 데이터를 저장할 수 있는 몇가지 기법을 HTML5가 제공되면서 이를 바꿔놓았습니다. 이 데이터는 서버로 전송될 수도 있고 그냥 클라이언트에 유지할 수도 있습니다. 어떻게 할지는 개발자 여러분의 선택입니다.

There are several reasons to use client-side storage. First, you can make your app work when the user is offline, possibly sync'ing data back once the network is connected again. Second, it's a performance booster; you can show a large corpus of data as soon as the user clicks on to your site, instead of waiting for it to download again. Third, it's an easier programming model, with no server infrastructure required. Of course, the data is more vulnerable and the user can't access it from multiple clients, so you should only use it for non-critical data, in particular cached versions of data that's also "in the cloud". See "Offline": What does it mean and why should I care? for a general discussion of offline technologies, of which client-side storage is one component.

새로 나온 문서

Offline Technologies

  • Web StoragelocalStorage["name"] = username; 형태의 손쉽게 키-값 매핑을 지원합니다. 불행하게도 현재의 구현은 문자열-문자열 매핑만을 지원하기 때문에 다른 자료 구조로 변환하는 방법이 필요하다. JSON.stringify()JSON.parse()를 사용하여 이를 처리할 수 있습니다.
  • Web SQL 데이터베이스는 구조화된 SQL 관계형 데이터베이스의 강력함(과 효율성)을 제공합니다.
  • 인덱스 데이터베이스는 웹 스토리지와 Web SQL 데이터베이스의 중간에 위치한 기능입니다. 웹 스토리지처럼 손쉬운 키-값 맵핑 형태이지만 관계형 데이터베이스와 같은 인덱스를 지원하여 특정 필드와 맞는 객체를 빠르게 검색할 수 있으며 수동으로 저장소의 모든 개체를 반복 검사할 필요가 없습니다.
  • File Access는 JavaScript에서 파일의 내용을 읽을 수있는 API입니다. 사용자가 파일들을 "파일 " INPUT 엘리먼트에 지정하면 파일의 내용을 읽거나 URL로 그것을 참조할 수 있습니다. (예를 들어 사용자가 이미지 파일을 지정하면 -URL을 사용하여- 이미지를 출력을 할 수 있습니다.) 파일 쓰기 기능의 진행 제안도 진행 중에 있습니다.

코드 데모를 통한 클라이언트 스토리지 기법들에 대한 자세한 비교는 클라이언트 스토리지 문서에서 볼 수 있습니다.

데모

HTML5 Demos: Storage
Synchronization with localStorage
Timer demo

적용 사례

Mobile Gmail
MugTug Darkroom

참고자료