HTML5　localStorage　サンプル　【入門編　第４回】

localStorage　サンプル

そろそろlocalStorageを使用したサンプルが多く出ていると思いきや、それほど人気がないのか、これといったサンプルに当たりません。
と思いきや、jQueryの日本語リファレンスサイトで、localStorageを使用した素敵なサイトがありました。

Qrefy

かなり斬新で、localStorageを使用しサクサクと動きます。
リファレンスサイトなどはこういうのを真似て欲しい反面、ＳＥＯ対策としては難しいのかなと。

さて、そんなわけでlocalStorageのサンプルを作成してみました。
前回はindexedDBを使用し、簡単なTODOを作成しましたが、
同じようなものをlocalStorageで実装した場合はどうかということを検証してみました。

localStorageのサンプル

１．データ登録

/* id="set" と設定してあるボタンを押下時 */
$('#set').click(function(){
	/* データはJSON形式 */
	var inp	= {
		"date" : $('#skey').val(),
		"title" : $('#title').val(),
		"content" : $('#content').val(),
		"postDate" : getDate()
	};
	/* シリアライズ化 */
	var str	= JSON.stringify(inp);
	/* 日付をキーにして値を追加 */
	localStorage.setItem($('#skey').val(), str);
});

indexedDBと比較すると transaction → objectStore の流れがなく、localStorageへ直接アクセスする為、割合簡単です。
ただ、データ型はオブジェクトがサポートされる筈なのですが、実際はサポートされていないブラウザがあり、文字列として登録する方が無難です。

２．キー指定時の検索処理

/* id="show" と設定してあるボタンを押下時 */
$('#show').click(function(){
	/* id="getkey" と指定してあるテキストの値を取得 */
	var sKey	= $('#getkey').val();
	if(sKey == ''){
		/* 検索キー未指定時はアラート */
		alert('検索日付を入力して下さい。');
		return;
	}
	/* リスト部分をクリア */
	$('#list').html('');
	/* localStorageをループ */
	$.each(localStorage, function(idx){
		/* indexからキーを取得 */
		var key	= localStorage.key(idx);
		/* キーから値(JSONへパースします)を取得 */
		var out	= JSON.parse(localStorage.getItem(key));
		/* 画面での指定キー（日付）を比較します。 */
		if(out.date.indexOf(sKey) != -1){
			var cont = out.content.replace(/rn|(n|r)/g, '<br />');
			var el	= $('<li>').html(
				'[' + out.date + ']&nbsp;<strong>' +
				out.title + '</strong><br/>' +
				cont +
				'<br/>登録日(' +
				out.postDate + ')'
			);
			/* リストに追加 */
			$('#list').append(el);
		}
	});
});

指定キーの有無を日付の中に含まれるかで検索しています。
indexedDBと比較すると、コールバックがない分すっきりしているように思えます。
ただ、構造的な記述方法からすると、transaction → objectStore から検索キーによる検索の方がすっきりしており、検索も早そうな気がします。