サンプル
「テキストボックス」「ラジオボタン」「セレクトボックス」「セレクトボックス(複数)」「チェックボックス」を保存する<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <script src="">http://code.jquery.com/jquery-1.10.1.min.js"> </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>
