ht11_storage
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
load_settings(); // 클라이언트측에 저장된 storage 값을 불러온다.
$("form#frm").submit(function(event){
event.preventDefault();
save_settings();
});
});
function load_settings(){
var bgcolor = localStorage.getItem("bg_color");
var text_color = localStorage.getItem("text_color");
var text_size = localStorage.getItem("text_size");
$("#bg_color").val(bgcolor);
$("#text_color").val(text_color);
$("#text_size").val(text_size);
apply_data();
}
function save_settings(){
//storage에 값을 주입해줌
localStorage.setItem("bg_color", $("#bg_color").val()); // 키 밸류 구조
localStorage.setItem("text_color", $("#text_color").val());
localStorage.setItem("text_size", $("#text_size").val()); // 키 밸류 구조
apply_data();
}
function apply_data(){
$("body").css("background-color", $("#bg_color").val());
$("body").css("color", $("#text_color").val());
$("body").css("font-size", $("#text_size").val());
}
</script>
</head>
<body>
** storage로 값 기억 ** (5mb 기억가능, 쿠키는 5kb?)<br/>
<form id="frm">
<fieldset id="colors">
<legend>색상 선택</legend>
<ul>
<li>
<label for="bg_color">배경색 : </label>
<input type="text" value="" id="bg_color"/>
</li>
<li>
<label for="text_color">글자색 : </label>
<input type="text" value="" id="text_color"/>
</li>
<li>
<label for="bg_color">글자크기 : </label>
<select id="text_size">
<option value="12">12px</option>
<option value="20">20px</option>
<option value="26">26px</option>
</select>
</li>
</ul>
<input type="submit" value="저장"/>
</fieldset>
</form>
</body>
</html>
'HTML' 카테고리의 다른 글
| HTML5 - 구글맵 사용하기 (0) | 2014.02.14 |
|---|---|
| html5 - webworker (쓰레드 개념) 멀티태스킹 (0) | 2014.02.14 |
| html5 - mainfest ( 네트워크가 끊어졌을 경우를 대비한 작업) (0) | 2014.02.14 |
| HTML 16진수 색상코드 (0) | 2013.06.23 |
| 인라인 테그와 블록레벨 테그 (0) | 2013.06.19 |