Garlic.jsを使ってフォーム入力内容をローカルストレージに保存する方法をご紹介します。
入力項目を入力しページを再表示(ページの更新「F5」または別ページに遷移してフォームに戻る)しても入力内容を保持します。
Contents
ディスプレイ広告
入力フォームのCSS記述
※必要に応じて変更して下さい。
<style> body { font-size: 18px; text-align: center; line-height: 1.6em; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0 0 0; } p{ padding-bottom: 20px; } .fb{ font-weight: bold; } </style>
Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するHTMLの記述
※formタグに「data-persist=”garlic”」を記述します。その他、各入力・選択項目を用意します。
<h1>Garlic.jsを使ってフォーム入力内容をローカルストレージに保存します。</h1> <p>以下の入力項目を入力しページを再表示(ページの更新「F5」)しても入力内容を保持します。<br>「送信」「リセット」ボタンをクリックすると入力内容がリセットされます。</p> <form data-persist="garlic" method="POST"> <label for="field1" class="fb">名前</label><br/> <input type="text" name="mytext" id="field1"/> <br/><br/> <label for="field1" class="fb">お問い合わせ内容</label><br/> <textarea name="textarea"></textarea> <br/><br/> <label for="select" class="fb">お問い合わせ種別</label><br/> <select id="select"> <option value="採用について">採用について</option> <option value="仕事の依頼">仕事の依頼</option> <option value="その他のお問い合わせ">その他のお問い合わせ</option> </select> <br/><br/> <label for="select" class="fb">血液型</label><br/> <label class="radio"> A <input type="radio" name="radio1" value="a" /> </label><br/> <label class="radio"> B <input type="radio" name="radio1" value="b" /> </label><br/> <label class="radio"> AB <input type="radio" name="radio1" value="ab" /> </label><br/> <label class="radio"> O <input type="radio" name="radio1" value="o" /> </label> <br/><br/> <label for="select" class="fb">業種</label><br/> <label class="checkbox"> 建設業 <input type="checkbox" name="checkbox[]" value="建設業"> </label><br/> <label class="checkbox"> 製造業 <input type="checkbox" name="checkbox[]" value="製造業"> </label><br/> <label class="checkbox"> 情報通信業 <input type="checkbox" name="checkbox[]" value="情報通信業"> </label><br/> <label class="checkbox"> 運輸業、郵便業 <input type="checkbox" name="checkbox[]" value="運輸業、郵便業"> </label> <br/><br/> <input type="submit" class="btn"/> <input type="reset" class="btn"/> </form>
Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するJavaScriptの記述
※jquery-1.8.2.min.js、garlic.jsファイルを読み込むだけです。
<script src="jquery-1.8.2.min.js"></script> <script src="garlic.js"></script>
Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するデモページ
Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するデモページ
ソース元:Garlic.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。