PhoneGapでLocalStorageを試してみる

公式ドキュメントPhoneGap API Documentationを参考に、PhoneGapのLocalStorageを試してみたのでメモ。

以前どこかの勉強会で、WebStorageをキャッシュとして利用するのもいいですよ　というお話を聞いたので、
簡単なサンプルを作成。

JavaScript

// データの読み込み
function loadData()
{
	$('#NoteDiv').html('');
	$('#ResultDiv').html('');
	
	// localStorage空データ取得
	var data = window.localStorage.getItem(key);
	
	if(data == null)
	{
		// localStorageにデータがなければ、Ajaxでデータ取得
		$.ajax({
			url : 'http://www.example.jp/acaoAjax',
			success : function(msg)
			{
				data = msg;
				$('#NoteDiv').html('Load data from server.');
				// 取得したデータをlocalStorageに保存
				window.localStorage.setItem(key,data);
				
				var jsonData = $.parseJSON(data);
				$('#ResultDiv').html(jsonData.name);
			},
			error : function(msg)
			{
				alert('Error!');
			}
		})
	}
	else
	{
		// localStorageにデータがあれば、そのデータを表示
		$('#NoteDiv').html('Load data from local storage.');
		
		var jsonData = $.parseJSON(data);
		$('#ResultDiv').html(jsonData.name);
	}
}
// localStorageのデータ削除
function deleteStorageData()
{
	$('#NoteDiv').html('');
	$('#ResultDiv').html('');
	// localStorageからデータを削除
	window.localStorage.removeItem(key);
}

HTML

<a href="javascript:loadData()">データを読み込み</a>
<p/>
<a href="javascript:deleteStorageData()">データ消去</a>
<div id="ResultDiv">
</div>
<div id="NoteDiv">
</div>

サーバーからのJSONデータ

{"id" : "001","name" : "山田太郎"}

データ読み込みをすると、最初の一回はAjaxでサーバーから取得してLocalStorageに保存、
２回目以降はLocalStorageから読み込みを行います。
LocalStorageのデータを消去すると、また１回目はサーバーに通信します。

LocalStrageのすべての機能を試してはいませんが、このサンプルの範囲であれば、PCのChromeやSafariでも動作するので、
ChromeやSafariで動作確認して、問題なければPhoneGap上で確認するという手順もできると思います。

ちなみに、オブジェクトの情報などをLocalStorageに保存するときは、JSON文字列にしてから保存したほうがいいという話を聞きました。