JavaScript

Garlic.jsを使ってフォーム入力内容をローカルストレージに保存する方法

 

Garlic.jsを使ってフォーム入力内容をローカルストレージに保存する方法をご紹介します。
入力項目を入力しページを再表示（ページの更新「F5」または別ページに遷移してフォームに戻る）しても入力内容を保持します。

Contents
  1. 入力フォームのCSS記述
  2. Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するHTMLの記述
  3. Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するJavaScriptの記述
  4. Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するデモページ
  5. ソース元：Garlic.js

入力フォームの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="建設業">&nbsp;
  </label><br/>
  <label class="checkbox">
      製造業 <input type="checkbox" name="checkbox[]" value="製造業">&nbsp;
  </label><br/>
  <label class="checkbox">
      情報通信業 <input type="checkbox" name="checkbox[]" value="情報通信業">&nbsp;
  </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

Garlic.js

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

Garlic.js 入力内容保持 ローカルストレージ
RELATED POST