■ はじめに

 クライアント側にデータを保存したい場合、クッキーがあるが、容量が少ない。
～～～～
 * Cookie の有効・無効の設定はブラウザで行うことができる
 * ブラウザでは 最低 300 個のクッキー（RFC2109 より）
  => これを超えると古い方から削除される
 * 一つのクッキーあたり最低 4096 バイト（RFC2109 より）
 * 個々のホストもしくはドメイン名ごとに最低 20 個のクッキー（RFC2109 より）
～～～～
そこで、HTML5から導入された「Web Storage (ウェブ ストレージ)」について、調べてみる。

【１】特徴/利点

 * データ保存容量 : 5MByte～(クッキー数KBより大容量)
 * キー単位では無制限
 * データを利用する時のみサーバ側へ送信
(クッキーよりはセキュアに利用でき、ネットワーク負荷が軽い)

【２】Web Storageの種類

１）localStorage

* ブラウザ内に永続的にデータを保存するストレージ
* データの有効期限なし
* 「オリジン(origin)単位(※)」の単位で保存

※オリジン

「プロトコル(例:http)＋ドメイン(例:blogs.yahoo.co.jp)＋ポート番号(例:80)」
で識別される

２）sessionStorage

 * ウィンドウごとのセッションで有効なストレージ
  => ウィンドウ／タブ間では、データ共有できない
  => ウィンドウ／タブが閉じられると、データは失われる

【３】使用上の注意

１）実装上での注意点

 1) 機密情報を極力保管しない方がいい
 2) (同じPCで複数ユーザが使用する場合を想定して)キーを、ユーザ識別情報と共に保存する

２）ブラウザ設定上での注意点

 * 結構多かったので、以下の関連記事にまとめた。

【４】サンプル

http://dev.classmethod.jp/references/webstrorage_favorite-condition/

を参考に、検索条件（今回はテキストボックスのみ）の保存を試みる

例１：テキストボックスでの保存

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="message"></div>
<form id='searchConditionForm'>
<table>
<tbody>
<tr>
 <td>テキストボックス</td>
 <td>
 <input name='textData' id='textData' type='text'/>
 </td>
</tr>
</tbody>
</table>
<input id='buttonSeach' type='submit' value='Seach' onClick="saveSearchCondition()" /><br/>
</form>
<script type="text/javascript">
// キーを、ユーザ識別情報と共に保存する
var SavingKey = 'userId001' + 'searchData';

$(function() {
  // ローカルストレージの利用可否確認
  if(!localStorage) {
    document.getElementById('message').innerText = 'ローカルストレージが使えないです';
    return;
  }
  // ローカルストレージからデータを取り出し
  var searchData = localStorage.getItem(SavingKey);
  if (searchData) {
    searchDataset = JSON.parse(searchData);
    $('#textData').val(searchDataset.textData);
  }
});

function saveSearchCondition() {
  var searchDataset = new Object();
  searchDataset.textData = $('#textData').val();
  
  localStorage.setItem(SavingKey, JSON.stringify(searchDataset));
}
</script>
</body>
</html>