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アナリティクスタグは流用しないで下さい。