<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<style>
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
window.onload = function(){
if(window.localStorage == "undefined"){
alert("localStorage를 사용할 수 없습니다!!!");
return;
}
// querySelector()
// var obj = document.querySelector("CSS셀렉터");
// var obj = document.getElementById("id속성값")
//btn1 = document.getElementById("btn1");
//btn2 = document.getElementById("btn2");
btn1 = document.querySelector("#btn1");
btn2 =document.querySelector("#btn2");
btnDel =document.querySelector("#btnDel");
btn1.onclick=function(){
//window.sessionStorage.setItem("data",
//document.getElementById("input1").value);
//document.querySelector("#input1").value);
window.sessionStorage["key2"] =
document.querySelector("#input1").value;
}
btnDel.onclick=function(){
window.sessionStorage.removeItem("key1");
}
btn2.onclick = function(){
//document.getElementById("output1").value=
document.querySelector("#output1").value=
//window.sessionStorage.getItem("data");
window.sessionStorage["key2"];
}
//btn3 = document.getElementById("btn3");
//btn4 = document.getElementById("btn4");
btn3 = document.querySelector("#btn3");
btn4 =document.querySelector("#btn4");
btnDel2 =document.querySelector("#btnDel2");
btnDel2.onclick = function(){
window.localStorage.removeItem("key1");
}
btn3.onclick = function(){
window.localStorage.setItem("key1",
//document.getElementById("input2").value);
document.querySelector("#input2").value);
};
btn4.onclick = function(){
//document.getElementById("output2").value=
document.querySelector("#output2").value=
window.localStorage["key1"];
};
allDel.onclick = function(){
window.sessionStorage.clear();
window.localStorage.clear();
}
}
/*
var init = function (){
$("#btn1").click(function(){
window.sessionStorage.setItem("data",$("#input1").val());
});
$("#btn2").click(function(){
$("#output1").val(window.sessionStorage.getItem("data"));
});
$("#btn3").click(function(){
window.localStorage.setItem("key2",$("#input2").val());
});
$("#btn4").click(function(){
$("#output2").val(window.localStorage.getItem("key2"));
});
};
$(document).ready(init);
*/
</script>
<!-- 웹 스토리지 : 클라이언트 측에 데이터를 저장할 수 있는 기능이다.
키/값의 쌍으로 데이터를 저장하고, 키를 기준으로 데이터를 조회하는 저장소를 제공한다.
모바일웹앱에서는 네트워크 상황이 변화가 많기 때문에 서버의 데이터에만 의존할 수 없다. 따라서, 서버와 접속이 되지 않는 환경에서 웹앱이 먹통이 되는 상황은 최소한 피해야 하기 때문에 클라이언트 측에 데이터를 저장해 두고 사용하게됨. 이런역할을 웹스토리지가 해낼 수 있다.
웹스토리지는 로컬스토리지와 세션스토리지로 구분된다.
로컬스토리지 : 영구 데이터를 저장하는 용도로 사용된다.
세션스토리지 : 세션이 종료되면 데이터도 사라진다.
[스토리지 속성]
clear : 스토리지내의 데이터를 삭제하는 속성
getItem : 키 값을 이용해서 해당 데이터를 얻어온다.
key(index) : 인덱스 값을 받아서 해당 키를 얻어온다.
length : 데이터의 갯수를 얻어온다.
removeItem(key) : 키를 파라미터로 받아 데이터를 삭제한다.
setItem(key, data) : 해당 키에 데이터를 등록한다.
-->
</head>
<body>
<div data-role="page" id="firstPg">
<div data-role="header" data-position="fixed" id="header">
<h3>웹스토리지</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<h3 class="ui-bar ui-bar-b">세션스토리지 사용</h3>
<div class="ui-body">
입력값 : <input type="text" id="input1" size="20">
<button id="btn1" data-inline="true">저장</button>
<button id="btnDel" data-inline="true">삭제</button>
<hr>
출력값 : <input type="text" id="output1" size="20">
<button id="btn2" data-inline="true">불러오기</button>
</div>
<h3 class="ui-bar ui-bar-b">로컬스토리지 사용</h3>
<div class="ui-body">
입력값 : <input type="text" id="input2" size="20">
<button id="btn3" data-inline="true">저장</button>
<button id="btnDel2" data-inline="true">삭제</button>
<hr>
출력값 : <input type="text" id="output2" size="20">
<button id="btn4" data-inline="true">불러오기</button>
<button id="allDel" data-inline="true">전체삭제</button>
</div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
</div>
</body>
</html>
'기존카테고리 > 하이브리드앱' 카테고리의 다른 글
| 구글 MAP API (0) | 2017.11.04 |
|---|---|
| [jQuery Mobile] GeoLocation (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforehide (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforecreate (0) | 2017.11.03 |
| [jQuery Mobile] pagebeforeload 등 초기화 이벤트 (0) | 2017.11.03 |