Hi Hi

'웹 스토리지 에뮬레이트'에 해당되는 글 1건

  1. HTML5 로컬 자장소에 데이터 저장 : 웹 스토리지 (3)

HTML5 로컬 자장소에 데이터 저장 : 웹 스토리지

 

웹 스토리지란 ?
웹 스토리지(Web storage) 는 단순한 Key-value 형태란 자바스크립트의 객체 변수와 비슷한 것으로,  키 (key)를 지정하면 그에 대흥하는 값(value) 값을 꺼내오는 형태의 데이터 베이스 기능이다.

웹 스토리지의 종류에는 창을 닫으면 사라지는 sessionStorage와 창을 닫아도 데이터가 남아있는 localStorage가 있다.
localStorage의 경우, '프로토콜://도메인:포트번호' 별로 별도의 저장소가 준비되어 있다.

메서드/ 속성 기능 
 length 저장소에 보관되어 있는 데이터의 수를 반환한다.
 key(요소 번호)  요소 번호(인덱스)를 지정하여 키를 얻는다.
 getItem(키)  키에 대응하는 값을 얻는다.
 setItem(키,값)  키와 값을 지정하여 데이터를 지정한다. (키와 값은 문자열)
 removeItem(키)  키에 대응하는 값을 삭제 한다.
clear()   저장소 전체를 삭제한다.

※getItem() 메서드, setItem() 메서드를 이용하지 않더라도 자바스크립트의 객체 변수와 같이 액세스할 수 있다.
//값을 설정
localStorage.keyname ="value";
//값을 꺼내오기
var v = localStorage.keyname;
alert(v);

그러면 웹 스토리지의 localStorage를 활용하여 방문자 카운터로 만들어보자.
접속 정보는 서버가 아닌 클라이언트에 저장되기 때문에 특정 사용자가 접속한 횟수만 집계하게 된다.

※이 프로그램은 iPad/iPone에서는 정상적으로 작동하지만, Android 1.6 단말기에서는 동작하지 않는다.
<body>
<div id="counter_div"></div>
<script type="text/javascript">
//LocalStorage의 카운터 값을 계산
 if (localStorage.counter==null){
  localStorage.counter=1;
  }
 else{
  localStorage.counter++;
  }
 //카운터를 표시
 var counter_div= document.getElementById("counter_div");
 counter_div.innerHTML= localStorage.counter;
</script>
</body>




LocalStorage 에뮬레이트
Android 브라우저용 Gears를 이용하면 동일한 기능을 구현할 수 있다. Shunpei Shiraishi가 작성한 gear5가 웹 스토리지를 에뮬레이트 해주기 때문이다.

아래 웹 사이트에서 ' gear5 라이브러리' 를 다운로드할 수 있다.
http://code.google.com/p/gear5/downloads/list

다운로드한 gear5-0.3.js를 예제 프로그램이 저장된 폴더로 복사한다. 그리고 방문자 카운토 프로그램을 다음과 같이 수정한다.

<body>
<div id="counter_div">*</div>
<script type="text/javascript" src="gear5-0.3.js>
<script type="text/javascript">
//LocalStorage의 카운터 값을 계산
 var cnt=localStorage.getItem("counter");
 
 if(cnt == unll){ //첫번째
  cnt=1;
 }
 else{//두번째 이후
  cnt++;
 }
 
 localStorage.setItem("counter",cnt);
 
 //카운터를 표시
 var counter_div= document.getElementById("counter_div");
 counter_div.innerHTML= cnt;
</script>
</body>

이 프로그램에서 변경한 점은 다음과 같다.
- 자바스크립트 라이브러리 gear5-0.3.js
- localStorage의 getItem() 메서드, setItem() 메서드를 사용하여 값을 얻고 저장

웹 스토리지를 이용하면 어플에서 참조하는 개인적인 데이터를 서버에 보내지 않아도 단말 내에서 모두 처리할 수 있게 된다. 또한 대용량 데이터가 아니더라도 어플에서 참조하는 간단한 설정 데이터를 저장하는 데에도 편리하게 이용할 수 있다.

간단한 메모장 작성

웹 스토리지에 자동으로 저장되며, 다시 접속했을 때 지난번에 작성했던 내용을 불러와 계속해서 편집할 수 있도록한다.

어플 시작 시에 메모 불러오기
시작하면 자동으로 이전에 작성한 메모를 표시하는데 이 기능을 구현하기 위해 window.onload 이벤트를 이용한다.
window.onload = function(){
//처리 내용
};

// 혹은 이벤트 리스너를 이용한다.
window.addEventListener("load",function(){
 //처리 내용
 }, false);
 
이때 주의할 점은, 어플을 처음으로 실행할 때에는 키가 존재하지 않기 때문에 localStorage가 null을 반환한다는 점이다. 따라서 localStroage.getItem() 메서드가 반환한 값이 unll를 체크하여 unll이 아닐 경우만 textarea에 이전에 작성했던 메모의 내용을 불러오도록 한다.


입력한 문장을 자동으로 저장
textarea의 내용을 변경하면 onchange 이벤트가 발생한다.
//textarea의 내용을 변경했을 때 발생하는 이벤트를 설정
main_txt.onchange = function(){
//메모 저장
localStorage.setItem("memo", main_txt.value);
msg_div.innerHTML="saved" + new Date().toString();
};

이때 주의할 점은, onchange 이벤트를 내용을 변경하면 바로 발생하는 것이 아니라 내용을 변경하고 입력 포커스를 다른 곳으로 이동했을 때 발생한다는 점이다.
onchange 이벤트가 발생하면 localStorge.setItem() 메서드를 이용하여 입력한 내용을 저장하는데, 언제 저장했는지 사용자에게 알려주기 위한 메시지를 textares 상단에 출력한다.


<body>
<h1>자동저장 메모</h1>
<div id="msg_div"></div>
<textarea id="main_txt" cols="80" rows="30"></textarea>
<!-- Android 1.6 지원 -->
<script type="text/javascript" src="gear5-0.3.js"></script>
<script type="text/javascript">
//textarea 객체 얻기
var main_txt = document.getElementById("main_text");
var msg_div = document.getElementById("msg_div");
//페이지를 읽어 들인 후 발생하는 이벤트를 설정
window.onload = function(){
//메모 읽어 들이기
var body = localStorage.getItem("memo");
if(body != unll){
main_text.value=body;
}

};
//textarea의 내용을 변경했을 때 발생하는 이벤트를 설정
main_txt.onchange = function(){
//메모 저장
localStorage.setItem("memo", main_txt.value);
msg_div.innerHTML="saved" + new Date().toString();
};

</script>
</body>

[출처:스마트폰 앱 개발을 위한 HTML 5(아이폰/아이패드/안드로이드)]


'' 카테고리의 다른 글

HTML5 웹 SQL 데이터베이스  (0) 2012.01.20
HTML5 로컬 자장소에 데이터 저장 : 웹 스토리지  (3) 2012.01.16
HTML5 동영상 재생  (0) 2012.01.14
HTML5 개발툴 소개  (0) 2012.01.11
HTML5 컨버스의 기초  (0) 2012.01.09
HTML5 프로그래밍의 기초  (0) 2012.01.07