サンプルコード
PhoneGap APIを参照すると、pause/resumeがそれぞれアプリがバックグラウンド動作になったタイミング/バックグラウンドから復帰したタイミングで呼ばれる関数のようです。それらが呼ばれたタイミングでStorage APIを利用して入力値をローカルストレージに退避します。
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// イベントリスナの登録。デバイスの準備完了まで待つ
document.addEventListener("deviceready", onDeviceReady, false);
// デバイス準備完了時にコールバック
function onDeviceReady() {
// イベントリスナの登録。アプリがバックグラウンド動作になったときに呼び出される
document.addEventListener("pause", onPause, false);
// イベントリスナの登録。アプリがバックグラウンドから復帰したときに呼び出される
document.addEventListener("resume", onResume, false);
// 退避値の表示
showText();
}
// アプリがバックグラウンド動作になった時にコールバック
function onPause() {
// 入力値の退避
var saveText = $("#sampleText").val();
window.localStorage.setItem("saveText", saveText);
}
// アプリがバックグラウンド動作から復帰した時にコールバック
function onResume() {
// 退避値の表示
showText();
}
// 退避値の表示
function showText() {
// 入力値の復帰
var saveText = window.localStorage.getItem("saveText");
$("#sampleText").val(saveText);
}
</script>
<title>Pause Resume Test</title>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<form id="sampleForm">
<input type="text" id="sampleText">
</form>
</div>
</div>
</body>
</html>
アプリ起動→Homeボタン→アプリ再表示と遷移しても値はちゃんと表示されました。アプリ起動→アプリ終了→アプリ再起動でも値は復帰されました。
0 件のコメント:
コメントを投稿