CHAPTER 14. HTML5 웹스토리지, 파일 API, 웹소켓
웹스토리지 웹스토리지 (web storage) 는클라이언트컴퓨터에데이터를저장하는메카니즘 웹스토리지는쿠키보다안전하고속도도빠르다. 약 5MB 정도까지저장이가능하다. 데이터는키 / 값 (key/value) 의쌍으로저장
localstorage 와 sessionstorage localstorage 객체 만료날짜가없는데이터를저장한다. 도메인이다르면서로의로컬스토리지에접근할수없음. sessionstorage 객체 각세션 ( 하나의윈도우 ) 마다데이터가별도로저장 해당세션이종료되면데이터가사라진다.
localstorage 예제 <!DOCTYPE html> <html> <head></head> <body> <p> 페이지방문횟수 : <span id="count"> </span> 번 </p> <script> if (!localstorage.pageloadcount) localstorage.pageloadcount = 0; localstorage.pageloadcount = parseint(localstorage.pageloadcount) + 1; document.getelementbyid('count').textcontent = localstorage.pageloadcount; </script> </body> </html>
버튼을클릭한횟수저장 <!DOCTYPE html> <html> <head></head> <body> <p> <button onclick="incrementcounter()" type="button"> 눌러보세요!</button> </p> <div id="target"></div>
버튼을클릭한횟수저장 <script> function incrementcounter() { if (('localstorage' in window) && window['localstorage']!== null) { if (localstorage.count) { localstorage.count++; else { localstorage.count = 1; document.getelementbyid("target").innerhtml = localstorage.count + " 번클릭하였습니다."; else { document.getelementbyid("target").innerhtml = " 브라우저가웹스토리지를지원하지않습니다."; </script> </body> </html>
sessionstorage 예제 <!DOCTYPE html> <html> <head></head> <body> <p> <button onclick="incrementcounter()" type="button"> 눌러보세요!</button> </p> <div id="target"></div>
sessionstorage 예제 <script> function incrementcounter() { if (('sessionstorage' in window) && window['sessionstorage']!== null) { if (sessionstorage.count) { sessionstorage.count++; else { sessionstorage.count = 1; document.getelementbyid("target").innerhtml = sessionstorage.count + " 번클릭하였습니다."; else { document.getelementbyid("target").innerhtml = " 브라우저가웹스토리지를지원하지않습니다."; </script> </body> </html>
파일 API 파일 API: 웹브라우저가사용자컴퓨터에있는로컬파일들을읽어올수있도록해주는 API PC 에서실행되는일반적인프로그램처럼동작 ( 웹애플리케이션 ) 파일 API 의가장전형적인응용분야는아무래도사용자가파일을선택하여서원격서버로전송하는작업 파일 API 에서사용되는객체는 File, FileReader File 객체는로컬파일시스템에서얻어지는파일데이터를나타낸다. FileReader 객체는이벤트처리를통하여파일의데이터에접근하는메소드들을제공하는객체이다.
파일 API 예제 <!DOCTYPE html> <html> <head> <title>html File API </title> <script> function readfile() { if (!window.file!window.filereader) { alert('file API 가지원되지않습니다.'); return var files = document.getelementbyid('input').files; if (!files.length) { alert(' 파일을선택하시오!'); return; var file = files[0]; var reader = new FileReader(); reader.onload = function () { document.getelementbyid('result').value = reader.result; ; reader.readastext(file, "euc-kr"); </script>
파일 API 예제 </head> <body> <input type="file" id="input" name="input"> <button id="readfile" onclick="readfile()"> 파일읽기 </button><br /> <textarea id="result" rows="6" cols="60"> </textarea> </body> </html>
파일정보표시예제 <!DOCTYPE html> <html> <head> <title>html File API </title> <script> function readfile() { var files = document.getelementbyid('input').files; output = ""; for (var i = 0, f; f = files[i]; i++) { output += f.name + "\n"; /* f.name - Filename */ output += f.type + "\n"; /* f.type - File Type */ output += f.size + "bytes\n"; /* f.size - File Size */ output += f.lastmodifieddate + "\n"; /* f.lastmodifieddate */ document.getelementbyid('result').value = output; </script> </head> <body> <input type="file" id="input" name="input"> <button id="readfile" onclick="readfile()"> 파일읽기 </button><br /> <textarea id="result" rows="6" cols="60"> </textarea> </body> </html>
웹브라우저로실행 실행결과
애플리케이션캐시 애플리케이션이사용하는파일들을클라이언트의캐시 (cache) 에저장 애플리케이션캐시는다음과같은세가지장점을제공한다. 오프라인상태일때도사용자는웹애플리케이션을사용할수있다 캐시된파일은더빨리로드되어서그만큼속도가빨라진다. 서버부하가감소된다.
lock.html ck.html ck.js 시계예제 <!DOCTYPE HTML> <html manifest="clock.appcache"> <head> <title>clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <button onclick="setclock()"> 시계시작 </button> <br /> <output id="clock"></output> </body> </html> output { font: 2em sans-serif function setclock() { var now = new Date(); document.getelementbyid('clock').innerhtml = now; settimeout('setclock()', 1000);
실행결과 인터넷연결이끊기면시계는동작할까요? 웹브라우저로실행
lock.appcache CACHE MANIFEST clock.html clock.css clock.js 매니페스트파일
복잡한매니페스트파일 CACHE MANIFEST # 2010-06-18:v2 # 반드시캐시해야할파일 CACHE: index.html stylesheet.css images/logo.png scripts/main.js # 사용자가반드시온라인이어야하는리소스 NETWORK: login.php # 만약 main.jsp 가접근될수없으면 static.html 로서비스한다. # 다른모든.html 파일대신에 offline.html 로서비스한다. FALLBACK: /main.jsp /static.html *.html /offline.html
웹소켓 웹소켓 (Web Socket) 은웹애플리케이션을위한차세대양방향통신기술 애플리케이션은 HTTP 의답답한구속에서벗어나서 TCP/IP 가제공하는모든기능을사용할수있다.
예제 <!DOCTYPE HTML> <html> <head> <script> var ws; function open() { if ("WebSocket" in window) { ws = new WebSocket("ws://echo.websocket.org"); ws.onopen = function () { alert(" 웹소켓오픈성공 "); ; ws.onmessage = function (evt) { var msg = evt.data; document.getelementbyid("result").innerhtml = msg; ; ws.onclose = function () { alert(" 웹소켓연결해제 "); ; else { alert(" 웹소켓이지원되지않음!");
예제 function send() { ws.send(document.getelementbyid("data").value); function quit() { ws.close(); </script> </head> <body> <button onclick="open()"> 웹소켓연결 </button> <button onclick="quit()"> 웹소켓연결종료 </button><br /> <input type="text" id="data" /> <button onclick="send()"> 데이터송신 </button><br /> 에코서버로부터받은데이터 : <output id="result"></output> </body> </html>