웹 어플리케이션의 개발에 가장 큰 문제점은.
현재 상태의 정보를 페이지 이동시 유지 할 수 없다는 것이였다.

그래서 수 많은 정보들을 GET 혹은 POST 방식으로 넘기고 넘기거나.
혹은 Cookie 혹은 Session 등에 저장하여 활용 하였으나.

수많은 보안 이슈와 환경적 제약에 따라서 구현에 어려움이 있었던 것이 사실이다.

이를 대체 할 Local Storage 에 관한 기술들이 제공 되었다.

 - Internet Exploere 의 userData
 - Firefox 의 DOM Storage
 - Flash Local Shared Object
 - Google Gears

뭐 아는건 여기까지 -_-;;;

이들은 기존의 방식에 비하여 좀더 정형화된 데이터 저장(key/value pair 방식으로 저장) 을 하거나.
보다 많은양의 데이터를 손 쉽게 저장하기 용이하다.

이러한 것들이 기존의 Server-Side 로 처리 되던 데이터 처리에 대한 부하를 Client-Side 로 가져 오면서
좀더 여유있는 리소스의 이용을 통하여 보다 빠른 속도의 웹 어플리케이션의 구현이 가능 해졌으며 .

더불어 "Beyond the Web" 라는 모토 아래
오프라인(Offline) 상에서 수정된 데이터를 온라인(Online) 때 실 서버로 동기화를 가능하게 되어
웹 어플리케이션은 '온라인(Online)' 이 아니면 사용 할 수 없다.!! 라는 환경적 제약을 뛰어 넘을 수 있게 되었다.

이러한 트랜드는 HTML 5 표준안에도 영향을 미쳤는데.
HTML 5 에서 Local Storage 를 지원 할 꺼라는 이야기는 예전에도 언급 되어왔었다.
 - HTML 5 Client-Side Database Storage( HTML 5 Working Draft )

여기에 추가로 DOM Element 에 "data-*" 속성(attribute) 이 추가 되었다.

사용방법은 간단하다 <div data-mygirl='An-so-hee'></div> 가 되면
"data-" 를 제외한 mygirl 이라는 Key 에 'An-so-hee' 라는 value 를 가진 데이터를 만들 수 있다.

다수의 "data-*" 속성(attribute) 을 이용 할 수 있으며
저장된 데이터는 직접 저렇게 적어 줄 수도 있지만.

보이지 않게 Javascript 를 이용하여 저장하면 출력도 가능하니 입맛에 맞게 알아서들 이용 하면 됨~

예제로 제공된 소스




이와 같은 형태는 Firefox 의 DOM Storage 나 InternetExploere 의 userData 와 구현방법은 비슷한 수준이 아니라 거의 동일하다고 봐도 무방한듯 싶다.

단지 이것이 표준화가 되었다는데 의의를 두자.

출처 : Embed your data - in HTML 5 - ajaxian.com
         HTML 5 working draft
         Boost Ajax performance using local storage - Niall Kennedy's Blog