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

f:id:ryoutaku_jo:20190720021521p:plain

【結論】

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

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

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

【目次】

【本題】

フォームの入力情報が消える問題

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

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

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

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

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

Garlic.jsについて

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

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

導入方法(Rails

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

#gem.file

gem "jquery-rails"
#applicationn.js

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

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

Garlic.js

f:id:ryoutaku_jo:20190720232442p:plain

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

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

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

●実装前

f:id:ryoutaku_jo:20190720023206g:plain

●実装後

f:id:ryoutaku_jo:20190720023236g:plain

参考情報

Garlic.js

フォームの入力内容を保存してくれる「Garlic.js」は便利なプラグイン | 無料パソコン教室PcSchool.Club

《今日の学習進捗(3年以内に10000時間に向けて)》

障害対応でてんやわんや・・・何も上手く出来ない・・・

学習開始からの期間 :223日
今日までの合計時間:2141h
一日あたりの平均学習時間:9.7h
今日までに到達すべき目標時間:2037h
目標との解離:104h
「10,000時間」まで、

残り・・・「7859時間!」