오늘 보실 것은 HTML5의 저장 기능입니다. 따로 DB연결 없이 HTML에서 바로 저장이 가능하고 불러올 수 있습니다.
먼저 기능 동작을 보시겠습니다.
최초 실행 화면입니다. 아무것도 없이 글을 쓸 수 있는 상자 하나에 메모지 비우기 버튼이 있습니다. 그럼 여기에 글을 써보도록 하겠습니다.
글을 쓴 화면입니다. 메모지 비우기 하단에 메모내용이 자동 저장되었습니다라는 글씨가 나타납니다. 자동으로 저장되었고 이제 브라우져를 끄더라고 해당 HTML파일만 다시 실행하면 현재 저장된 내용이 상자안에 나타납니다.
간단한 insert와 select문을 사용한 것과 같은 효과이지만 이것은 서버와도 연결이 되어 있지 않고 인터넷 연결도 안되었고 그냥 컴퓨터에서 실행 한 것입니다. 이러한 것을 이용하여 모바일에선 최소한의 데이터를 빠르게 내려받은뒤 마치 인터넷 연결이 되어 있는 것과 같은 효과를 줄 수도 있습니다. 웹으로 실행하는 게임 역시 마찬가지 방식으로 인터넷 연결이 끊겨도 나의 점수가 남아 있는 다거나 그동안 진행한 부분부터 다시하는 것등이 가능합니다.
그럼 이제 소스를 보겠습니다.
<!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>
saveText(),pageload(),clr() 세개의 자바스크립트 메소드가 사용되었습니다.
textarea에서 글을 쓰면 saveText() 메소드가 호출되고 이곳에서 메모내용이 저장되었습니다라는 글을 보여줍니다.
localStorage.setItem(“memo”, msg.value); 매우 간단한 데이터 저장입니다. memo는 키값입니다. 이값을 알고 있어야 원하는 값인 msg.value을 뽑아낼 수 있습니다. 출석번호 47번 후유, 47번 나와 하면 후유가 담임선생님꼐 뛰어가는 것과 같습니다.
msg.value = localStorage.getItem(“memo”); 페이지가 시작될 때 pageload()가 호출되고 저장되어 있는 값을 불러냅니다.
그래서 브라우져를 끄고 다시켜도 해당 값이 보이는 것입니다.
clr()는 localStorage.clear(); 이것으로 저장하고 있는 데이터를 지워버립니다. 따라서 메모지비우기를 하고나면 더이상 다시 실행하여도 아무런 값이 나오지 않습니다.
