フォームに入力した内容が、思わぬ操作によって消え去ってしまった経験はないだろうか。
入力中にページ遷移したり、ブラウザを閉じたりすることで、せっかく入力した内容を失ってしまう。ユーザーはそんなときどうするだろう。
きっとそのサービスを離脱するに違いない。貴重な時間を割いて入力、および選択した内容が忽然と消えてしまうのだから無理もない。たとえそれが本人の不注意によるものだったとしてもだ。
このような事案回避にピッタリなJavaScriptライブラリがある。
このエントリーでは、フォームデータを永続化するJavaScriptライブラリ「FormPersistence.js」を紹介したい。
FormPersistence.jsについて
フォームデータを保持するJavaScriptライブラリだ。フォーム項目の入力と選択は、localStorageあるいはsessionStorageに保存される。永続化したデータは、ページ遷移やフォーム更新、再訪問時にフォームに反映が可能だ。
特徴
- フォームデータの永続化
- HTML要素にライブラリ特有の記述なし
- JavaScriptの記述は、最小で2行あれば実行可能
FormPersistence.jsを触ってみる
入手する
npm (or yarn) でインストール
npm install form-persistence --save
# or
yarn add form-persistenceCDNで読み込む jsDelivr
<script src="https://cdn.jsdelivr.net/gh/FThompson/[email protected]/form-persistence.min.js"></script>使用する
HTML
<form id="test-form">
<div class="form-group">
<label for="title">タイトル</label>
<input type="text" name="title" id="title" class="form-control">
</div>
<div class="form-group">
<label for="post-body">フリーテキスト</label>
<textarea name="post-body" id="post-body" class="form-control"></textarea>
</div>
<input type="submit" class="btn btn-primary">
</form>JavaScript
let form = document.getElementById('test-form');
FormPersistence.persist(form);設定する
persistメソッド
FormPersistence.persist(form[, options])永続化するフォームとして定義する。
saveメソッド
FormPersistence.save(form[, options])フォームデータをストレージに保存する。
loadメソッド
FormPersistence.load(form[, options])ストレージからフォームに反映する。
clearStorageメソッド
FormPersistence.clearStorage(form[, options])ストレージからフォームデータを削除する。
serializeメソッド
FormPersistence.serialize(form[, options])フォームデータをJSON文字列に変換する。
deserializeメソッド
FormPersistence.deserialize(form, data[, options])JSON文字列をオブジェクトに変換してフォームに反映する。
まとめ
フォームデータを永続化するJavaScriptライブラリ「FormPersistence.js」の紹介だった。フォーム入力が不慮の行為で消えてしまうことが想定される場合にも、フォームデータが永続化されていれば、サイト離脱は免れるかもしれない。ぜひとも実装しておいてもらいたい機能だ。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
