３．全件検索処理
/* 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 + '] <strong>' +
out.title + '</strong><br/>' +
cont +
'<br/>登録日(' +
out.postDate + ')'
);
/* リストに追加 */
$('#list').append(el);
});
});
キー指定検索に比較部分がなくなったものです。
indexedDBでは、レンジを作成しストアより取得するものだった為、少し複雑でしたが、localStorageでは検索部分は簡略化できそうです。
４．まとめ
全体的なソースコードは、indexedDBよりlocalStorageの方が短いです。
トランザクション／ストアなどの考え方もなく、key-valueでの値の保持のみなので、簡単といえば簡単です。
実装に関して簡単で、ブラウザの対応がほぼされているlocalStorageに未来を感じます。
個人的にはsqliteに期待しているのですが。
簡単にlocalStorageのメソッドを記載します。
| length | ストレージへ格納されてた数を取得 |
| key(index) | 項目のインデックスを指定してキーを取得 |
| getItem(key) | キーを指定して値を取得 |
| setItem(key, data) | 指定されたキーを保存 |
| removeItem(key) | 指定されたキーを削除 |
| clear() | ストレージをクリア |
IE対応はかなりはまるようです。２点注意事項があります。
- localStorage対応バージョンでも、あらかじめ設定をONにしていないと動かない。
- ローカル環境ではlocalStorageが動作しない。
IE対応の6/7対応はこちらへ
Ex DOM Storage をリリースしました
