<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HackYa | HTML5 : Local Storage</title>
<style>
.page-wrap {
width: 100%;
max-width: 500px;
margin:auto;
}
.lists {
padding:10px;
}
.todo {
padding:20px 10px;
}
.input {
width: 300px;
border: black 2px solid;
padding: 6px;
float:right;
}
</style>
<script>
var db = null;
function html5_storage_support() {
try {
return 'localStorage' in window && window['localStorage'] == null;
} catch (e) {
return false;
}
}
//check for storage support
if (!html5_storage_support) {
alert("브라우저에서 자스를 켜주세요");
} else {
//DB 생성
db = openDatabase("MyMemo", "1", "My Personal Memo", 100000);
function storeMyMemo(id) {
var fullname = document.getElementById('fullname').innerHTML;
var phone = document.getElementById('phone').innerHTML;
var email = document.getElementById('email').innerHTML;
var todo = document.getElementById('todo').innerHTML;
localStorage.setItem('mcFull',fullname);
localStorage.setItem('mcPhone',phone);
localStorage.setItem('mcEmail',email);
localStorage.setItem('mcTodo',todo);
}
//get stored values from key
function getMyMemo() {
if ( localStorage.getItem('mcFull')) {
var fullname = localStorage.getItem('mcFull');
var phone = localStorage.getItem('mcPhone');
var email = localStorage.getItem('mcEmail');
var todo = localStorage.getItem('mcTodo');
}
else {
var fullname = 'Write Your Name';
var phone = 'Your Telephone';
var email = 'Email';
var todo = 'Things to do';
}
document.getElementById('fullname').innerHTML = fullname;
document.getElementById('phone').innerHTML = phone;
document.getElementById('email').innerHTML = email;
document.getElementById('todo').innerHTML = todo;
}
function clearLocal() {
clear: localStorage.clear();
return false;
}
}
</script>
</head>
<body>
<header>
<h1 style="text-align:center">Personal Memo Page using HTML5 local storage</h1>
</header>
<div class="page-wrap">
<div id="myMemo">
<div class="lists">Name: <span id="fullname" class="input" contenteditable="true" onkeyup="storeMyMemo(this.id)"></span></div>
<div class="lists">Telephone: <span id="phone" class="input" contenteditable="true" onkeyup="storeMyMemo(this.id)"></span></div>
<div class="lists">email: <span id="email" class="input" contenteditable="true" onkeyup="storeMyMemo(this.id)"></span></div>
<div class="todo">Things to do today: <span id="todo" class="input" contenteditable="true" onkeyup="storeMyMemo(this.id)"></span></div>
<div><a onclick="clearLocal(); getMyMemo();" href="javascript:void(0);">Erase Memo</a></div>
</div>
<script>
getMyMemo();
</script>
</div>
<aside>
<br />
<p style="width: 500px; margin:auto;">Whatever you write will be saved in your local storage within your browser & it will remain saved until you erase it. <br /><br />Turn the browser off and re-open your browswer to see that the information has been stored in your local storage.</p>
</aside>
</body>
</html>