jQuery Mobile で WebStorage を使う方法

Formで送信したデータを横取りして、webstorageに入れてみました。

HTMLは、こんなカンジで。

<form id="form" method="get" action="/search/">
<input type="search" id="search" name="q" value="" />
</form>

Formのidは「form」。
送信したデータの名前は「q」。

続いて、スクリプトです。

$(document).on("submit", "#form", function(){
　if (window.localStorage) {
　　var storage = sessionStorage;
　　var key = jQuery.now();
　　var val = $(this).serialize().split('=')[1];
　　//alert(val);
　　storage.setItem(key, val);
　}
});

簡単に説明
on("submit", "#form", … Formの送信を検知。
if (window.localStorage) … ブラウザで webstorageが使えるか、確認。
storage = sessionStorage … セッションストレージを使います。
key = jQuery.now() … キーとして、現在時刻をセット
val = $(this).serialize().split('=')[1] ‥ 送信データから値を取り出し
(例えば、「nec」と入力した場合、「q=nec」が送信されますよ。)
storage.setItem(key, val) … webstorage に格納

格納されたことを確認するには(Chromeの場合)
その他ツール → デベロッパーツール → Resources → Session Storage

取り出すには

var storage = sessionStorage;
for (var i=0; i < storage.length; i++) {
　var key = storage.key(i);
　var val = storage.getItem(key);

for で回して、keyとvalを得ます。

アイデア次第で、イロイロなことに使えそう。