フォームに入力した内容が、思わぬ操作によって消え去ってしまった経験はないだろうか。

入力中にページ遷移したり、ブラウザを閉じたりすることで、せっかく入力した内容を失ってしまう。ユーザーはそんなときどうするだろう。

きっとそのサービスを離脱するに違いない。貴重な時間を割いて入力、および選択した内容が忽然と消えてしまうのだから無理もない。たとえそれが本人の不注意によるものだったとしてもだ。

このような事案回避にピッタリな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-persistence

CDNで読み込む jsDelivr

<script src="https://cdn.jsdelivr.net/gh/FThompson/FormPersistence.js@2.0.3/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」の紹介だった。フォーム入力が不慮の行為で消えてしまうことが想定される場合にも、フォームデータが永続化されていれば、サイト離脱は免れるかもしれない。ぜひとも実装しておいてもらいたい機能だ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。