이젠 Web Storage 를 살펴보려 합니다.

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

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 객체를 저장할 수 있습니다.

Web storage 는 Web Browser 마다 별도로 가지고 있는 저장 공간에 Data 를 Key-Value 형식으로 저장합니다.

Web Storage 는 용도에 따라서 Local Storage 와 Session Storage 로 나뉘는데요. 두 Storage 의 차이는 저장기간이나 유효범위만 다를 뿐 거의 같은 API 를 사용합니다.

그럼 Local Storage 부터 살펴보도록 하겠습니다.

13-1. Local Storage
Local Storage 는 저장기간에 제약이 없고 Web Site 의 Domain 에 따라서 생성되는 Storage 입니다.
저장기간도 사용자가 삭제하기 전까지 영구적으로 저장할 수 있습니다. 그렇기 때문에 기존의 Cookie 를 이용한 저장작업을 Local Storage 가 대신하기에 충분합니다. 거기다 Server 측과의 통신작업도 없기때문에 Client 들이 더욱 좋아라 하리라 생각합니다. Server 측에 부하도 주지 않으니 더욱...

그럼 그 사용법을 한번 보기로 하죠.
먼저 Web Browser 가 Local Storage 를 지원하는지 Check 해 봐야 할 것입니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
.....
};
</script>

이젠 저장하는 방법을 보겠습니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
};
</script>

저장을 했으니... 가져와야겠죠?

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
};
</script>

지우고 싶다고요? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

};
</script>

하나하나 지우지 말고 말끔히 지우실랍니까? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

localStorage.clear();
};
</script>


쉽죠? 쉽죠? ㅋㅋㅋ
너무 쉬운건 매력없잖아효? ㅋㅋㅋ
이번엔 조금 다른 방법을 살펴보도록 하겠습니다.

저장할 때는

localStorage.setItem("NickName", "woojja");
localStorage.NickName = "woojja";
localStorage["NickName"] = "woojja";


가져올 때는
var NickName = localStorage.getItem("NickName");
var NickName = localStorage.NickName;
var NickName = localStorage["NickName"];


지울 때는
localStorage.removeItem("NickName");
delete localStorage.NickName;
delete localStorage["NickName"];


와 같은 방법으로 사용을 합니다.

전체 Storage Data 에 대해서
for(var i=0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
...
}

또는
for(var key in localStorage) {
var value = localStorage[key];
...
}

이렇게 접근해서 사용할 수 있습니다.


Session Storage 도 사용 방법은 다르지 않습니다.
내용에 약간의 차이가 있을 뿐인데요...
그럼 이번엔 Session Storage 를 살펴보도록 하겠습니다.

13-2. Session Storage
Session Storage 는 Local Storage 와 같이 도메인마다 생성이 되지만 Browser Window 의 유효범위와 생존기간을 갖습니다.
그래서 Local Storage 와는 다르게 Browser Window가 닫히면 Session Storage도 같이 삭제됩니다.
그럼 Browser Window를 복제하면 어떻게 될까요?
예상은 하고 계시겠지만, 복제된 순간까지는 Session Storage 의 내용은 같겠지만 그 이후의 내용은 서로에게 아무런 영향을 주지도 않고 별개의 Storage 로 작동하게 됩니다.
이런 특징을 갖는 Session Storage 는 사용자의 동작을 추적하여 기록할 때 사용할 수 있다고 합니다.

Session Storage  의 사용은 Local Storage 와 같다고 말씀을 드렸는데.
단지 localStorage 를 sessionStorage 객체로 바꿔 사용하시기만 하면 됩니다.

13-3. Storage Event Handling
Storage 는 Storage 의 변경에 대해서 window 객체가 Storage Event 를 발생시킵니다. 
다음 표는 그 Event 가 가지고 있는 속성들 입니다.
 속성  설명 
 key  변경된 Key, clear() Method 가 호출되면 null 을 반환한다.
 oldValue  변경되기 전의 값(복사본). 새로운 키로 값을 등록하였다면 null.
 newValue  변경된 후의 값(복사본). 값이 삭제되었을 때는 null.
 url  Event 가 발생한 문서의 URL.
 storageArea  변경된 Storage 참조.

13-4. 예제
아래 예제는 LocalStorage 에 대한 내용입니다.
신기하게도 그대로 남아 있네요... (당연한거겠지만요... ㅋㅋ) 
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>간단 메모지</title>
        <script type="text/javascript">
            function saveText() {
                info = document.getElementById("info");
                info.style.display = "block";
                localStorage.setItem("memo", msg.value);
            };
            function pageload() {
                msg = document.getElementById("txtBox");
                msg.value = localStorage.getItem("memo");
            };
            function clr() {
                msg.value = "";
                localStorage.clear();
                info.style.display = "none";
            };
         </script>
 </head>
 <body onload="pageload()">
        <h2>간단한 메세지</h2>
        <textarea id="txtBox" onKeyDown="saveText();" onKeyUp="saveText();" cols="50" rows="5"></textarea><br/>
        <input type="button" value="메모지 비우기" onClick="clr();" onKeyUp="clr();" />
        <p id="info" style="display:none;">메모내용이 자동 저장되었습니다.</P>
 </body>
</html>

 



다음 예제는 session Storage 에 대한 내용입니다.
값을 두개 넣고 난후 윈도우 창을 복제하였습니다.
그리고 두번째 생긴 Window 에서 값을 넣어 본 것입니다. 두개의 storage 가 별개라는 것을 말씀드리려 한 것이죠..
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Session Storage Viewer</title>
 </head>
 <body onload="ShowAll()">
        <h1>Session Storage Test</h1>
        키 : <input id="k" type="text"> 값 : <input id="v" type="text">
        <button onclick="Save()">저장</button>
        <button onclick="Remove()">삭제</button>
        <button onclick="window.open(location.href);">윈도우 생성</button>
        <hr>
        <select id="entries" size=5 onchange="onEntrySelected()">
        </select>
        <button onclick="ShowAll()">다시 표시</button>

        <script type="text/javascript">

            var key = document.getElementById("k");
            var value = document.getElementById("v");
            var entries = document.getElementById("entries");

            function ShowAll() {
                entries.innerHTML = "";
                for (var i=0; i < sessionStorage.length; i++ )
                {
                    var k = sessionStorage.key(i);
                    entries.options[entries.options.length] = new Option(k + ":" + sessionStorage[k], k);
                }
            };

            function Save() {
                sessionStorage[key.value] = value.value;
                ShowAll();
            };

            function Remove() {
                delete sessionStorage[key.value];
                ShowAll();
            };

            function onEntrySelected() {
                var selectedOption = entries.options[entries.selectedIndex];
                key.value = selectedOption.value;
                value.value = sessionStorage[selectedOption.value];
            };
         </script>

 </body>
</html>


오늘은 Web Storage 에 대해서 살펴 보았습니다.

잘 기억해 두시기 바랍니다.
이젠 Cookie 보다는 이 두녀석을 사용하시는 걸 고려하실 날이 머지 않았으니 말이죠...

그럼 행복한 고수되십시요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18

이젠 Communication API 를 살펴보려 합니다.

다음의 내용과 소스는 웹혁명을 꿈꾸다 HTML5 & API 입문 을 참고 하였습니다.


Communication API 는 MessageEvent 라고 하는 javaScript 객체나 문자열을 비동기방식으로 주고 받음으로써 여러프로그램간의 데이터를 공유하게 합니다.
이러한 방식은 다음에 살펴보게될 Web Worker 나 Server-Sent Event 등에서도 사용하는 방식입니다. 공통의 API 를 사용한다는 점이 장점이라고 할 수 있습니다.

12-1. MessageEvent
그럼 Communication API 의 중심인  MessageEvent 부터 살펴보도록 하겠습니다.

앞에서도 말한바와 같이 MessageEvent 는 두 지점간에 주고 받는 메세지를 말하는데요. Javascript 객체입니다.
그리고 다음과 같은 속성을 가지고 있습니다.
 속성 설명 
 data  송신되는 Message 의 내용이 되는 데이터
 origin  Message 송신처의 Domain (Cross Document Messaging 과 Server Sent Event 에서만 사용)
 lastEventId  마지막 Event ID (Server Sent Event 에서만 사용)
 source  Message 를 보내는 Windows 객체(Cross Document Messaging 에서만 사용)
 ports  Message 송신시 지정한 포트의 복사본

12-2. Cross Document Messaging
Cross Document Messaging 을 사용하면 둘 이상의 웹페이지가 서로 데이터를 주고 받을 수 있습니다.
가장 큰 특징은 다른 도메인간의 통신이 가능해 졌다는 것입니다. 도메인간의 통신이 가능해진만큼 보안에 특히나 신경을 써야겠지요? 확인하는 방법도 함께 구현해야 할 것입니다.
구현도 간단해서 수신측 Window 의 postMessage() Method 를 호출하고 수신하는 곳에서는 자신의 window 에 대해 onmessage Event Handler 를 지정하면 됩니다.

소스를 보는 것이 더 편할 듯하죠? ㅋㅋㅋ
일단 이녀석들을 구현하기 위해서 웹서버에 Site 를 두개 만들었습니다.
구성은 아래그림과 같습니다.


비슷해 보이지만 위의 사이트에는 iframe Tag 를 포함한 index.html 페이지가 있습니다.
위 사이트는 8880번 포트를 사용하고 있구요...

아래에는 iframe 의 Source 가 되는 페이지인 frame.html 파일이 있습니다.
아래 사이트는 8881번 포트를 사용하고 있습니다.


시나리오는 이렇게 흘러갑니다. index.html 페이지에서 타이머를 돌려서 매 초당 한번씩 계속 iframe 의 Source 인 frame.html 페이지에 데이터를 전송할 겁니다.
당연히 frame.html 에 데이터가 갱신되겠죠? ㅋㅋㅋ
그럼 소스를 보겠습니다.

index.html 페이지의 내용입니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
        <title>Communication API 예제</title>

        <script type="text/javascript">
            function init() {
                //1초마다 IFrame 에 메시지를 보냄
                setInterval(Send, 1000);
            }

            function Send(){
                var ifrm = document.getElementById("ifrm");
                var MyOrigin = location.protocol + "//" + location.host;
                var date = new Date();
                var dateStr = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + " " + date.getHours() + ":"  + date.getMinutes() + ":" + date.getSeconds();
                var number = Math.floor(Math.random() * 100);    
                   
                ifrm.contentWindow.postMessage({date:dateStr, number:number}, "http://localhost:8881");
                document.getElementById("msg").innerHTML = dateStr + " 생성된 값은 '" + number + "' 입니다. <br/> MyOrigin : " + MyOrigin;
         }
         </script>
 </head>
 <body onload="init();">
     <div id = "msg">8880<br/>MyOrigin</div>          
     <iframe id="ifrm"
src="http://localhost:8881/communicationAPI/frame.html" width=500 height=200></iframe>
 </body>
</html>


네 그럼 이제 받는 녀석의 내용도 봐야겠지요?
frame.html 페이지의 내용입니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8" />
  <title>Communication API 예제</title>
        <script type="text/javascript">

         var MyOrigin =
http://localhost:8880;
         window.addEventListener("message", function(e){
                        if(
e.origin==MyOrigin) {
                            document.body.innerHTML = "<div>e.origin : " + e.origin + " <br/> " + e.data.date + " : 송신된 값은 " + e.data.number + " 입니다.</div>";
                        }
                    }, false);

        </script>
 </head>
 <body>   
  <div id = "msg"></div>
8881
 </body>
</html>
위 Markup 에서 가장 중요한 부분은 addEventHandler 도 있지만
바로 "e.origin==MyOrigin" ... 이 부분... 이 부분입니다.
이렇게 보낸측의 Domain 을 확인하지 않는다면 위와 같이 대상 사이트를 iframe 에 담고 postMessage() 로 계속해서 메세지를 보내는 것도 가능할 것입니다. (내가 악의적 코드를 만든거였던거에요?ㅋㅋㅋ)
이런 보안적으루다가 취약한 점이 있으므로 반드시 받는 쪽에서는 보낸곳의  Domain 을 확인해야 할 것입니다.


안타깝게도 ie9 에서는 data 값을 제대로 인식을 못하네요... ㅡㅡ' (실망이야~~ ㅋㅋㅋ)


12-3. Channel Messaging
이번엔 Channel Messaging 에 대해서 살펴보죠...
Channel Messaging 은 다대다 메세지 통신을 실현하기위한 API 입니다. 

MessageChannel 이라는 Channel 을 통해 Message 를 송수신하게 되는데요. Message 의 출입구가 되는 Channel 에는 두개의 Port가 있어서 Port1 에 수신된 Message 는 Port2 로 Port2 에 수신된 Message 는 Port1 으로 전달됩니다.

이런 각각의 Port 는 MessagePort 라는 Type 의 Object 로 다음과 같은 Method 와 속성을 가집니다.
 Method 명  설명 
 start()  Port 를 사용할 수 있게 합니다. 두개의 Port 모두 Start 해주어야 합니다.
 close()  Port 를 사용할 수 없게 합니다.
 PostMessage  Port 에 Message 를 보냅니다. 보낸 Message 는 상대편 Port 로 부터 읽어들여집니다.
 onmessage  Port 에 Message 가 도착하면 이 속성에 지정된 Event Handler 가 호출됩니다.

그럼 예제를 만나보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8" />
  <title>Channel Messaging 예제</title>
        <style>
            .messageLog{
                width:200px;height:200px;
                overflow:scroll;float:left;
            }
        </style>
        <script type="text/javascript">

            var channel = new MessageChannel();

            channel.port1.start();
            channel.port2.start();


            function addDisplay() {
                var div = document.createElement("div");
                div.className = "messageLog";
                document.getElementById("messageLogs").appendChild(div);

                channel.port2.addEventListener("message", function(e){
                div.innerHTML += "<div>" + e.data + "</div>";               
                }, false);

            }
            function showMsg() {
                var msg = document.getElementById("msg").value;
                channel.port1.postMessage(msg);               
            }
        </script>
 </head>
 <body>
        <h1>채널 메세징 예제</h1>
  <input id="msg" type="text">
        <button onclick="showMsg()">송신</button>
        <button onclick="addDisplay()">표시 영역 추가</button>
        <div id="messageLogs"></div>
 </body>
</html>


Channel 을 생성한 후에 두개의 Port 를 시작하고, 
port 1 의 postMessage 를 통해 Message 를 보내고, port2 에서 Message 를 처리하는 부분에 집중해 주십시요...

아래 그림은  입력란에 "가나다라마바사아" 를 한글자씩 늘려가면서, 표시영역을 하나씩 추가하여 송신을 눌러봤습니다.   


그리고 Communication API 에는 포트 공개라고 하는 것이 하나 더 있는데요.
제가 구현을 해보았는데 계속 에러가 발생을 해서요...
이 부분은 제가 내공을 더 쌓은 후 살펴보도록 하겠습니다. (죄송합니다.) ㅡㅡ'


흠 완벽? 하진 않지만 Communication API 를 살펴보았습니다.
어떻습니까? 이제 진정으로 Web Application 이라는 것이 더욱더 다가오는 것 같지 않으십니까? 그것도 HTML 작성 만으로 말이죠... (HTML 이 더 어려워요... ㅡㅡ' : 뭐 정확학게는 javascript 인가요? ^^;)


 

그럼 행복한 고수되셔요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18

Offline Web Application 이란 말그대로 Offline 상태에서도 동작하는 Application 입니다.
점점 사용이 늘어나는 스마트폰, 넷북 등 모바일 기기에서 아주 유용할 것입니다.
Network상태가 많이 좋지 않은 지하철(요즘은 그래도 좀 나아지긴 했지만요...) 이나 항공기 탑승중일때도 사용할 수 있을 것입니다.
그리고 client 에  Cache 된 Resource를 사용하기때문에 application 의 응답성이 좋아 Network 사용도 줄어들어 battery 관리에도 좋을 것입니다.

한가지 예로 Web 을 통해 메일을 작성하거나 블로그를 작성한다고 생각해 보십시요.
아주 긴 장문의 글을 적었는데 

Send 또는 Save 버튼을 딱!!! 
인터넷이 딱!!! 
적은 글들이 딱!!!

모두 사라져 버린 경험... 여러분들 모두 경험하신 적이 있으실 것입니다.

Offline Web Application 기능을 사용한다면 이런 경우는 이제 다시? 일어나지 않을 것입니다. ^^

11-1. Manifest 작성
Offline Web Applicaiton 은 Offline 상태에서 Web Application 을 동작시키기 위해서 Cache 를 사용합니다. 
생각해 보십시요.
갑자기 network 이 끊어졌습니다.
방금까지 보고 있던 페이지를 Refresh 를 누르면 희멀건 에러페이지를 보여줄 것입니다. 페이지에 연결할 수 없다는...
하지만 다시 보려고 한다면 무엇이 필요할까요?

먼저 페이지가 있어야 할 것입니다. 그 페이지에는 Style을 정의한 Style Sheet 파일들이 연결되어 있겠죠? 그리고 javascript 파일들도 연결되어 있을겁니다. iframe 이 포함되어 있다면 iframe 에 포함된 page 들도 있을 것이고요...
그리고 페이지 상에는 많은 이미지가 있을 것입니다. 그리고 다른 싸이트, 다른 페이지로 연결되어 있는 많은 링크가 존재할 것입니다.

그렇습니다. Offline 에서도 Web Application 이 동작을 하기 위해서는 현재 보고 있는 페이지 뿐만이 아니라 그 페이지와 연결된 많은 파일들이 필요하게 됩니다.
하지만 이 모든 것들을 Cache 에 저장하여 가지고 있다면... 그리고 그 cache 에 접근해서 페이지를 보여준다면?
ㅋㅋㅋ
갑자기 행복해 지지 않습니까? (구현할 일이 더 걱정된다고요? ㅋㅋㅋ)

그렇습니다. Offline Web Application 은 Cache 를 사용하도록 되어 있습니다.

그리고 cache 를 사용하기 위해서는 어떤 파일들을 Cache 해야하는지도 알려주어야 하는데요.
이때 사용하는 것이 manifest 파일입니다.

그럼 manifest 파일을 작성해 보도록 하겠습니다.

먼저 manifest 파일은 Browser 에 의해서 Download 되는 파일이므로 웹서버에 manifest 파일에 대해서 "text/cache-manifest" 라는 MIME Type 으로 등록해 주셔야 합니다.

html5news.html 파일을 작성했다고 생각해 보겠습니다. 이 페이지는 Offline 에도 작동하도록 하고 싶습니다.

그러기위해서는 먼저 html5news.manifest 를 작성해야 합니다.
크게 세부분으로 나위어져 있다는 것을 보실 수 있습니다.

CACHE MANIFEST 부분은 반듯이 맨 윗에 포함되어야하는 필수 사항입니다.
CACHE MANIFEST
#Cache Section
html5news.html
html5news.js
html5news.css
IMG_4687.jpg
#Network Section : 무조건 Network 상태에서만 사용할 수 있습니다. 아래 파일과 Directory 에 있는 파일들은 Offline 에서는 사용할 수 없습니다.
NETWORK:
search.aspx
/core/
#Fallback Section :  html5news.html 파일을 찾을 수 없는 경우 notice.html 을 cache 하도록 합니다.
FALLBACK:
html5news.html notice.html


그리고 이 Manifest 파일은 사이트에 접속을 하여 해당 페이지에 접근을 하게 되면 다운로드되도록 해야하는데 아래와 같은 코드를 그렇게 하기위해 <HTML> Tag 에 추가해 줍니다.

<!DOCTYPE html>
<html
manifest="html5news.manifest">
.
.
.
</html>



11-2. Offline Web Application API 사용
그럼 이제 Web Browser 단에서 Offline Web Application API 를 지원하는지 Check하고, online, offline 시 각각 어떻게 처리해야하는지를 정의해야 합니다.

아래와 같은 Code 를 사용하여 현재 Browser 가  Offline Web Application API 를 지원하는지 여부를 check 할 수 있습니다.
if(window.applicationCache) { 
  ...
}

아래와 같은 Code 로 Network 이 Online 인지 Offline 인지를 Check 합니다.
function init() {
  if (
navigator.onLine) { 
   ... 
  } else { 
   ... 
  }
}


그리고 online , offline 으로 상태가 바뀔때 어떻게 처리할 지에 대한 event Handler 를 추가해 줍니다.
window.addEventListener("online", function(e) { 
  ...
}, true);
 
window.addEventListener(
"offline", function(e) {
  ...
}, true);

11-3. applicationCache 의 Status
applicationCache 는 다음과 같은 상태값을 갖습니다.
 상태  정수값 설명 
 UNCACHE  0  Cache하지 않음.
 IDLE  1  최신 Cache를 이용 중.
 CHECKING  2  Update Check 중.
 DOWNLOADING  3  Update Download 중.
 UPDATEREADY  4  최신 Cache를 이용할 수 있음.
 OBSOLETE  5  Error에 의해 cache 무효화.

11-4. applicationCache 의 event
applicationCache 로 부터 발생하는 Event 는 다음과 같습니다.
 상수  설명 
 checking  Update Check 중.
 error  Update 가 Error 로 종료.
 noupdate  Manifest 가 Update 되지 않음.
 downloading  Update Download 중.
 progress  Update Download 중.
 updateready  최신 cache 얻기 완료. swapCache() 함수를 호출할 수 있음.
 cached  cache 완료.
 obsolete  manifest 얻기에 실패하여 cache를 무효로 함. 


11-5. Sample

이제 간단한 예제를 작성해 보겠습니다.

html5news.manifest 파일의 내용입니다.
CACHE MANIFEST
# JavaScript
./html5newsOffline.js 
./html5newsLog.js 

# stylesheets
./html5news.css 


html5news.html 파일의 내용입니다.
<!DOCTYPE html>
<html lang="en" manifest="html5news.manifest">
<head>
    <title>HTML5 Offline Application</title>
    <script src="html5newsLog.js"></script>
    <script src="html5newsOffline.js"></script>
    <script src="html5news.js"></script>
    <link rel="stylesheet" href="html5news.css">
</head>
<script type="text/javascript">
</script>
<body onload="init();">
    <header>
      <h1>Web Offline Application 예제</h1>
    </header>
      
    <section>
      <article>
        <button id="btnCheckUpdate">업데이트 확인</button>
        <h3>My Log</h3>
        <div id="info">
        </div>
      </article>
    </section>
</body>
</html>

html5newsOffline.js 파일의 내용입니다.
window.applicationCache.onchecking = function(e) {
    log("Application update 사항을 Check 하고 있습니다.");
}
 
window.applicationCache.onnoupdate = function(e) {
    log("application update 할 사항이 없습니다.");
}
 
window.applicationCache.onupdateready = function(e) {
    log("Application 을 update 할 준비가 되었습니다.");
}
 
window.applicationCache.onobsolete = function(e) {
    log("Cache 를 삭제합니다.");
}
 
window.applicationCache.ondownloading = function(e) {
    log("application update 사항을 Download 하고 있습니다.");
}
 
window.applicationCache.oncached = function(e) {
    log("Application cached 되었습니다.");
}
 
window.applicationCache.onerror = function(e) {
    log("Application cache error 입니다.");
}
 
window.addEventListener("online", function(e) {
    log("Online 입니다.");
}, true);
 
window.addEventListener("offline", function(e) {
    log("Offline 입니다.");
}, true); 
 
 
showCacheStatus = function(n) {
    statusMessages = ["캐시하지않음","최신 캐시이용중","최신 캐시 Check중","Download 중","최신 캐시 사용가능","캐시 무효화"];
    return statusMessages[n];
}
 
install = function() {
    log("최신 캐시 Check중");
    try {
        window.applicationCache.update();
    } catch (e) {
        applicationCache.onerror();
    }

 
init = function(e) { 
    if (!window.applicationCache) { 
        log("이 브라우져는 HTML5 Web Offline Application API 를 지원하지 않습니다."); 
        return;
    } 
 
    log("캐시 상태 초기화 : " + showCacheStatus(window.applicationCache.status));
    document.getElementById("btnCheckUpdate").onclick = install;
}


html5newsLog.js 파일의 내용입니다.
log = function() {
    var p = document.createElement("p");
    var message = Array.prototype.join.call(arguments, " ");
    p.innerHTML = message;
    document.getElementById("info").appendChild(p);
}

(Pro HTML5 Programming 참고)




흠... 이번엔 Web Offline Application API 에 대해서 살펴보았습니다.
예제를 보시면 알겠지만 Web Server 에서 동작 시킨 것이 아니라서...
Web Server 동작시킨 화면은 다시 올려드리도록 하겠습니다. (죄송해요...)

그럼...

행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\







    
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14

안녕하십니까? 이번엔 Drag & Drop API 에 대해서 살펴보려합니다.
가끔 우리는 사진, 파일 같은 항목들을 Drag & Drop 할 수 있도록 만든 사이트들을 보셨을 겁니다.
Gmail 에서 보셨을텐데요... HTML 5 적용하기 이전에도 구현이 되어있었죠...
이전에 구현되어있던 Gmail 의 Drag & Drop 은 mouseDown, mouseOver 같은 Mouse 이벤트를 이용하여 Javascirpt 로 구현을 한 것이죠. 
Javascript 를 사용하지 않았다면 ActiveX 를 사용하였겠지요.
이런 Javascript 나 ActiveX 는 별도의 설치가 필요하거나 Javascript 를 사용함으로써 별도의 부하가 생기고요(어떤 분들은 Client 측의 부하는 대수롭지 않게 넘어가시는 분들도 계시죠?) 그 부하로 인해서 버벅거리는 경우도 발생하였을 겁니다.

하지만, 이제 HTML 5 에서는 Drag & Drop API 를 제공하여 좀 더 손쉽게???, 간단하게??? 다른 플러그인들이 도움없이도 구현할 수 있게 되었습니다.(기존에 만든것들을 버리고 새로 구현해야 하는 숙제가 남긴했지만요... ^^ 캬캬캬)

이젠 웹페이지에 있는 content 를 웹페이지 밖, 그러니까는 데스크탑으로 가져올 수도, 데스크탑의 content 를 웹페이지로 막막막? 가지고 갔다가 가지고 왔다가... 하실수 있습니다. ^^

그럼 시작해 봅니다.

10-1. draggable 속성
HTML 5 에 새로이 추가된 속성중에 draggable 속성이 있습니다. true, false값을 가질 수 있습니다.
딱 눈치로 알수 있듯이...
draggable 속성이 true 이면 drag 할 수 있는 것이고, false 면 당근 drag 못하겠죠?

<img draggable="true" src="IMG_4687.jpg"></img>


사실 HTML 5 에서는 img Element 와 href 속성이 지정된 A Element 만 기본값 상태에서 Drag 할 수 있도록 되어 있습니다... 만... ㅋㅋ
Draggable 값이 True 라고 해서 무조건 Drag 할수 있는 것은 아니고요.
API 를 이용한 Javascript 를 사용하셔야 움직이실 수 있읍니다. ㅋㅋㅋ

10-2. Drag & Drop 관련 Event
그럼, HTML 5 에 새롭게 추가된 Drag & Drop API 의 관련 Event 들을 살펴보기로 하겠습니다.
 
 Event 이름 Event 가 발생하는 곳 Action 
 dragstart  Drag 를 할 Element  Drag 가 시작됨
 drag  Drag 를 할 Element  Drag 중
 dragenter  Drag 중 Mouse가 Element와 겹치는 순간의 Element  Element 에 진입했음
 dragleave  Drag 중 Mouse가 Element에서 떠나는 순간의 Element  Element를 떠남
 dragover  Drag 중 Mouse 가 현재 위치한 Element  Element 위를 지나고 있음
 drop  Drop 할 Element  Drop 됨
 dragend  Drag 하고 있는 Element  Drag 가 끝남

특히나 dragenter, dragover, drop  이 세 event 는 Drop 과 관련하여 적절히 사용할 필요가 있습니다. 


10-3. DataTransfer
DataTransfer? 이건 또 뭐야? 라는 분이 계실 겁니다.
DataTransfer 객체는 Drag & Drop API 를 사용하는데 있어서 반드시 있어야 하는 객체이구요.
이녀석은 Drag & Drop 되는 녀석들의 Data 를 담는 역할을 합니다.

그럼, DataTransfer 의 속성과 Method 를 살펴보도록 하겠습니다. 

 속성/Method  설명
 dropEffect  Drag & Drop동작의 종류를 나타내는 문자열
 copy, move, link, none(초기값) 중 하나
 effectAllowed 속성에 의해 허용되지 않은 종류의 동작은 처리할 수 없음.
 effectAllowed  허용할 dropEffect를 지정하는 문자열
 copy, move, link 와 같은 동작을 허용하며 copyLink, copyMove, linkMove, all 과 같은 둘 이상의 동작을 동시에 허용할 수도 있음.
 none(drop을 허용하지 않음) 을 지정할 수 있음.
 dragstart 이벤트에 값을 지정하는 것이 일반적임
 types  dragstart 이벤트 발생시 DOM 목록에 있는 data format 을 설정하며 setData 함수를 호출할때 지정되는 format 문자열을 배열형식으로 얻을 수 있음.
 clearData(type)  Drag & Drop에 사용할 데이터를 초기화하며 Drag 중인 데이터를 삭제함.
 setData(type, data)  Drag & Draop 하기위해 새로운 요소를 정의하며 Drag & Drop 할 데이터를 저장함.
 getData(type)  setData 에서 정의한  Element와 Format, 데이터를 가져옴.
 files  다른 application 으로부터 Drag & Drop 할 파일을 가져옴.
types 속성에 "Files" 라는 문자열이 저장됨.
 setDragImage(image, x, y)  Drag 중 img Element 를 이용하여 피드백을 지정함.
 addElement(element)  Drag 중 피드백 image 에 추가할 Element 를 추가함.



10-4. 예제...

이제 간단한 Drag & Drop 예제를 만들어 보겠습니다. 정말 간단한 예제 입니다. ^^;

<!DOCTYPE html>
<html>
    <head>
        <title>Drag & Drop Test</title>
        <script type="text/javascript">
            function drag(target, e) {
                e.dataTransfer.setData('Text', target.id);               
            };
            function drop(target, e) {
                var id = e.dataTransfer.getData('Text');
                target.appendChild(document.getElementById(id));               
                e.preventDefault();
            };    
        </script>
        <style>
            div#Red {border:2Px solid #F00;}
            div#Blue {border:2Px solid #00F;}
            div {width:400px;height:266px;}
            a {margin:50px;display:block;}
        </style>
    </head>  
    <body>       
        <div id="Red" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
        <div id="Blue" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
        <img draggable="true" id="textlink" ondragstart="drag(this, event);" src="IMG_4687.jpg"></img>
    </body>
</html>


 


위와 같이 firefox, safari, chrome 는 이미지를 이동시킬때 기본적으로 이미지를 표시하지만 ie 의 경우는 마우스커서를 파일 복사할때 나타내는 커서로 변경시킵니다. opera 는 작동을 하지 않는 군요... 다른 속성을 추가해야 할 것으로 보입니다.

예제와 함께 간단하게 Drag & Drop API 를 살펴보았습니다.
위 예제를 한번 다시 살펴보시고요...

그럼 행복한 고수되십시요...


 woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10

+ Recent posts