ページ遷移してもフォームの入力情報を保持する「Garlic.js」

【結論】

・フォームに途中まで入力を行っていても、ブラウザを閉じたりページ遷移してしまうと、入力情報が消えてしまい、再度入力する手間が発生してしまう

・「Garlic.js」を導入すると、フォームに入力途中でページ遷移したとしても、入力情報が保持される

・実装方法は、「Garlic.js」の導入とformのタグを修正するだけで非常にシンプル。入力情報はブラウザのローカルストレージに保持される

【目次】

【本題】

会員登録や注文画面などで、フォームの入力途中に、間違ってブラウザを閉じたり、ページを遷移してしまったことで、途中まで入力した情報が全て消えてしまい、再度入力しなければならなくなったという経験は、多くの方がされていると思います。

WEB上の通信は、サーバーの負荷軽減やセキュリティ対策などの観点で、基本的にステートレス（状態やデータを保持しない）で行われている為に、この様な問題が発生します。

項目数が多かったり、住所など確認をしないと入力できない内容などだと、入力に時間を要するので、この様なリスクが発生する可能性は高まります。

せっかく時間を掛けて入力した内容が消えたとなると、かなりの徒労感を与えてしまい、最悪ユーザーの離脱にも繋がりかねません。

こういった問題を防ぐ手段の一つが、今回紹介する「Garlic.js」です。

Garlic.jsは、フォームが送信されるまで、フォームのテキストを自動的に保持してくれるjQueryのプラグインです。

誤ってタブやブラウザを閉じたり、ページ遷移したとしても、途中まで入力したところから入力を再開する事ができます。

Railsで導入する場合は、まずjQueryを導入する必要があります。

#gem.file

gem "jquery-rails"

#applicationn.js

//= require jquery
//= require jquery_ujs
//= require_tree .

次に以下の公式からgarlic.jsファイルをダウンロードして、配置します。

そして値を保持したいフォームの属性にdata-persist="garlic"を設定します。

なお、Hamlでは、ハッシュのキーをシンボルにする場合、-(ハイフン）が使えないので、data: { persist: 'garlic' }という様にハッシュを階層化して記述する必要があります。

= form_with(model: [post, post_comment], local: true, data: { persist: 'garlic' }) do |f|

●実装前

●実装後