はじめに

のサンプルを極力共通化する。

「テキストボックス」「ラジオボタン」「セレクトボックス」
「セレクトボックス(複数)」「チェックボックス」を保存するサンプル

【１】構文

 * 簡単に使用できる

１）Web Storageオブジェクトの取得

var 【保存していた値】 = localStorage.getItem('【キー】');

２）保存

localStorage.setItem('【キー】', 【保存する値】);

３）削除

localStorage.removeItem('【キー】');

４）イベント

// ストレージ情報に関する操作を実施した際のイベント 
// タブ内、複数のタブ内など、それぞれのWeb Storageの範囲内で通知
window.addEventListener("storage", function(evt) {
  console.log(evt.key + " " + evt.oldValue + " => " + evt.newValue);
})

【２】サンプル

<!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>
<tr>
 <td>ラジオボタン</td>
 <td>
  <input name='raddioData' id='raddio1' type='radio' value='1'><label for='raddio1'>Data1</label>
  <input name='raddioData' id='raddio2' type='radio' value='2'><label for='raddio2'>Data2</label>
 </td>
</tr>
<tr>
 <td>セレクトボックス</td>
 <td>
  <select name='selectData' id='selectBox' >
    <option value='a'>DataA</option>
    <option value='b'>DataB</option>
    <option value='c'>DataC</option>
    <option value='d'>DataD</option>
  </select>
 </td>
</tr>
<tr>
 <td>セレクトボックス(複数)</td>
 <td>
  <select name='multipleData' id='multipleBox' size="4" multiple>
    <option value='A0'>Data0</option>
    <option value='A1'>Data1</option>
    <option value='A2'>Data2</option>
    <option value='A3'>Data3</option>
  </select>
 </td>
</tr>
<tr>
 <td>チェックボックス</td>
 <td>
   <input type="checkbox" id="checkbox1" name="checkboxData" class="checkboxClass" value="a1">
   <label for='checkbox1'>Data-a</label>
   <input type="checkbox" id="checkbox2" name="checkboxData" class="checkboxClass" value="a2">
   <label for='checkbox2'>Data-b</label>
   <input type="checkbox" id="checkbox3" name="checkboxData" class="checkboxClass" value="a3">
   <label for='checkbox3'>Data-c</label>
 </td>
</tr>
</tbody>
</table>
<input id='buttonSeach' type='submit' value='Seach' /><br/>
</form>
<script type="text/javascript">
var SavingKey = 'userId001' + 'searchData';

$(function() {
  // ローカルストレージからデータを取り出し
  var searchData = loadJsonData(SavingKey);
  if (searchData) {
    $('#textData').val(searchData.textData);
    $('#searchConditionForm input[name="raddioData"]').val([searchData.raddioData]);
    $('#selectBox').val(searchData.selectBox);
    $('#multipleBox').val(searchData.multipleBox);
    $('#searchConditionForm input[name="checkboxData"]').val(searchData.checkboxData);
  }
});

$('#buttonSeach').click(function() {
  var searchDataset = new Object();
  searchDataset.textData = $('#textData').val();
  searchDataset.raddioData = $('#searchConditionForm input[name="raddioData"]:radio:checked').val();
  searchDataset.selectBox = $('#selectBox').val();
  searchDataset.multipleBox = $('#multipleBox').val();
  searchDataset.checkboxData = [];
  $('#searchConditionForm input[name="checkboxData"]:checked').each(function() {
    searchDataset.checkboxData.push($(this).val());
  });

  saveJsonData(SavingKey, searchDataset);
});

// 共通処理
function loadJsonData(key) {
  // ローカルストレージの利用可否確認
  if(!localStorage) {
    document.getElementById('message').innerText
     = 'ローカルストレージが使えないです';
    return null;
  }
  // ローカルストレージからデータを取り出し
  var loadingDataset = localStorage.getItem(key);
  if (!loadingDataset) {
    document.getElementById('message').innerText
      = 'ローカルストレージ(Key [' + key + '])にデータが保存されていません';
    return null;
  }
  
  return JSON.parse(loadingDataset);
}

// 共通処理
function saveJsonData(key, savingDataset) {
  if(!localStorage) {
    return;
  }

  // 一旦削除してクリアにする
  localStorage.removeItem(key);

  // Jsonとして保存
  localStorage.setItem(key, JSON.stringify(savingDataset));
}
</script>
</body>
</html>