JavaScript

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

  /

今回は、Garlic.jsを使ってフォーム入力内容をローカルストレージに保存する方法をご紹介します。
この機能を使用すると、ユーザーが入力した内容を保持し、ページを再表示（ページの更新「F5」または別ページに遷移してフォームに戻る）しても入力内容を失うことがなくなります。

Contents

Garlic.jsとは

Garlic.jsは、フォーム入力を自動的に保存し、ユーザーがフォームを再度開いたときに入力内容を復元する便利なライブラリです。これにより、ユーザーエクスペリエンスが向上し、誤ってページを閉じたり、インターネット接続が切れたりしても入力内容が失われる心配がなくなります。

CSSの記述

まずは、入力フォームのスタイルを設定しましょう。以下の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>

HTMLの記述

次に、Garlic.jsを使ってフォーム入力内容をローカルストレージに保存するHTMLを記述します。formタグに data-persist=”garlic” 属性を追加するだけで、Garlic.jsは自動的にフォームの入力内容を保存します。

<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>

JavaScriptの記述

Garlic.jsを使用するには、まずjquery-1.8.2.min.js、garlic.jsファイルを読み込む必要があります。以下のスクリプトタグをHTMLに追加してください。

<script src="jquery-1.8.2.min.js"></script>
<script src="garlic.js"></script>

　
Garlic.jsは、jQueryと連携して動作するため、jQueryを先に読み込むことが重要です。これにより、Garlic.jsはフォーム入力の自動保存と復元を行います。

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

以下のリンクからGarlic.jsを使ったデモページを確認することができます。このデモページでは、実際にフォーム入力内容がローカルストレージに保存される様子を確認できます。

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

ソース元：Garlic.js

Garlic.jsの詳細な情報やドキュメントは、以下のリンクから確認できます。Garlic.jsを使って、より便利でユーザーフレンドリーなフォームを実現しましょう。

Garlic.js

まとめ

Garlic.jsは、ユーザーがフォームに入力した内容を自動的にローカルストレージに保存し、ページを再表示しても入力内容を保持する便利なライブラリです。これにより、ユーザーエクスペリエンスが向上し、入力内容が失われるリスクを軽減できます。簡単な設定で利用できるため、ぜひプロジェクトに導入してみてください。

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

ローカルストレージ Garlic.js 入力内容保持
関連記事