html5

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

Posted 8月 8 2012 by Teachers  , with 0 コメント

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

localStorage サンプル

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

Qrefy →

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

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

localStorageのサンプル

1.データ登録

/* 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へ直接アクセスする為、割合簡単です。
ただ、データ型はオブジェクトがサポートされる筈なのですが、実際はサポートされていないブラウザがあり、文字列として登録する方が無難です。

2.キー指定時の検索処理

/* 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 から検索キーによる検索の方がすっきりしており、検索も早そうな気がします。

3.全件検索処理

/* id="showAll" と設定してあるボタンを押下時 */
$('#showAll').click(function(){
	/* リスト部分をクリア */
	$('#list').html('');
	$.each(localStorage, function(idx){
		/* indexからキーを取得 */
		var key	= localStorage.key(idx);
		/* キーから値(JSONへパースします)を取得 */
		var out	= JSON.parse(localStorage.getItem(key));
		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では、レンジを作成しストアより取得するものだった為、少し複雑でしたが、localStorageでは検索部分は簡略化できそうです。

4.まとめ

全体的なソースコードは、indexedDBよりlocalStorageの方が短いです。
トランザクション/ストアなどの考え方もなく、key-valueでの値の保持のみなので、簡単といえば簡単です。
実装に関して簡単で、ブラウザの対応がほぼされているlocalStorageに未来を感じます。
個人的にはsqliteに期待しているのですが。

簡単にlocalStorageのメソッドを記載します。

length ストレージへ格納されてた数を取得
key(index) 項目のインデックスを指定してキーを取得
getItem(key) キーを指定して値を取得
setItem(key, data) 指定されたキーを保存
removeItem(key) 指定されたキーを削除
clear() ストレージをクリア

IE対応はかなりはまるようです。2点注意事項があります。

  1. localStorage対応バージョンでも、あらかじめ設定をONにしていないと動かない。
  2. ローカル環境ではlocalStorageが動作しない。

IE対応の6/7対応はこちらへ
Ex DOM Storage をリリースしました →


HTML5



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。