back
ローカルストレージへのデータ保存 (2/2)
■簡易メモを作ろう
では、ローカルストレージを利用したサンプルとして、簡単なメモアプリを作ってみましょう。
前回、作成したサンプルのindex.htmlを下のリスト欄のように書き換えてください。あるいは新たにプロジェクトを作成してもかまいません。
またAndroidアプリを作る場合、Manifest.mfに以下の一文を追加して、ネットワーク利用できるようにしておいてください。
ここでは、ローカルストレージには"count"というキーと、そして"data番号"という名前のキーの値が保管されています。"count"は、現在保管しているデータの数を示すものです。そしてそれぞれのテキストは、保管した最初のものから順に"data0"、"data1"、"data2"……というように番号付けしたキー名で保管されるようになっています。これは、以下のように行います。
・データを保存する場合
getItem('count');で"count"の値を取り出します。そして入力エリアのテキストを取り出し、setItem('data' + count++, str);
というようにしてテキストを"data番号"のキーに保管します。最後に、setItem('count', count);で１増えた値を"count"に保存します。
・データを取り出す場合
入力エリアに欠かれた番号を取り出し、getItem("data" + str);というようにして"data番号"のキーからテキストを取り出します。これをダイアログのメッセージタグにテキストとして設定し、表示を切り替えます。
今回はjQuery Mobileを利用しているので、jQuery Mobileのページ機能を使ってダイアログっぽく結果を表示しています。このあたりはjQuery Mobileについての入門などで別途学習ください。
ローカルストレージは、このようにちょっとしたテキストを保管しておくのに大変便利な機能です。ただし、単純に「キーに値が保管されるだけ」というものなので、例えばユーザの名前・メールアドレス・電話番号を管理する、というような使い方には向きません。こうしたものは、もっと本格的なデータベース機能を利用する必要があるでしょう。
前回、作成したサンプルのindex.htmlを下のリスト欄のように書き換えてください。あるいは新たにプロジェクトを作成してもかまいません。
またAndroidアプリを作る場合、Manifest.mfに以下の一文を追加して、ネットワーク利用できるようにしておいてください。
<uses-permissionこのサンプルは、１つの入力エリアと２つのボタンからなります。入力エリアにテキストを書いて「add data」ボタンをクリックすると、書いたテキストを保存します。保管されたテキストは、ゼロから順に番号をつけて管理されます。入力エリアに番号を書いて「show data」ボタンを押すと、その番号のテキストをダイアログで表示します。
android:name="android.permission.INTERNET" />
ここでは、ローカルストレージには"count"というキーと、そして"data番号"という名前のキーの値が保管されています。"count"は、現在保管しているデータの数を示すものです。そしてそれぞれのテキストは、保管した最初のものから順に"data0"、"data1"、"data2"……というように番号付けしたキー名で保管されるようになっています。これは、以下のように行います。
・データを保存する場合
getItem('count');で"count"の値を取り出します。そして入力エリアのテキストを取り出し、setItem('data' + count++, str);
というようにしてテキストを"data番号"のキーに保管します。最後に、setItem('count', count);で１増えた値を"count"に保存します。
・データを取り出す場合
入力エリアに欠かれた番号を取り出し、getItem("data" + str);というようにして"data番号"のキーからテキストを取り出します。これをダイアログのメッセージタグにテキストとして設定し、表示を切り替えます。
今回はjQuery Mobileを利用しているので、jQuery Mobileのページ機能を使ってダイアログっぽく結果を表示しています。このあたりはjQuery Mobileについての入門などで別途学習ください。
ローカルストレージは、このようにちょっとしたテキストを保管しておくのに大変便利な機能です。ただし、単純に「キーに値が保管されるだけ」というものなので、例えばユーザの名前・メールアドレス・電話番号を管理する、というような使い方には向きません。こうしたものは、もっと本格的なデータベース機能を利用する必要があるでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※index.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function doAction(){
var count = window.localStorage.getItem('count');
var str = $('#input').val();
window.localStorage.setItem('data' + count++, str);
window.localStorage.setItem('count', count);
alert("保存しました。");
}
function doAction2(){
var str = $('#input').val();
var msg = window.localStorage.getItem("data" + str);
$('#dlg_title').text('No, ' + str + ' のメモ');
if (msg != undefined){
$('#msg').text(msg);
} else {
$('#msg').text('no data...');
}
$.mobile.changePage('#dlg');
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<h2>Sample Page</h2>
<textarea id="input"></textarea>
<button onclick="doAction();">add data</button>
<hr />
<button onclick="doAction2();">show data</button>
</div>
</div>
<div id="dlg" data-role="dialog">
<div data-role="header">
<h1>dialog</h1>
</div>
<div data-role="content">
<h2 id="dlg_title">Sample Page</h2>
<p id="msg"></p>
</div>
</div>
</body>
</html>
| << 前へ |