로컬스토리지 예제 :
<!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>
======================================================================================
세션스토리지 예제 :
<!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>
'HTML5' 카테고리의 다른 글
| 페북 공유하기 (0) | 2013.05.21 |
|---|---|
| 웹,모바일에서 사용가능한 스크래치 기능 (0) | 2013.04.05 |
| 객체 3d로 돌리기 (0) | 2013.04.05 |
| 스크롤시 이미지 고정 (0) | 2013.04.05 |
| HTML5 코딩을위한 기본설정 (0) | 2013.04.04 |