フォームの送信内容を保存し復元するFormStorageを公開しました。

2018年08月07日（火）

フォーム送信時にフォームの内容をローカルストレージに自動で保存し、再度そのフォームに訪れた際にストレージからデータを復元するためのJavaScript、FormStorageをリリースしました。
同じフォームの送信内容の復元はもちろんのこと、別のフォームでもローカルストレージのデータの使い回しができるのが特徴です。
https://appleple.github.io/form-storage/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

デモ
特徴
使い方
オプション
メソッド
ダウンロード
リンク

デモ

See the Pen FormStorage.js デモ by appleple (@appleple) on CodePen.

特徴

フォームの状態の保存、復元
保存する項目としない項目の詳細な設定が可能

使い方

JavaScriptの読み込み

<script src="https://unpkg.com/form-storage@latest/build/form-storage.min.js"></script>

HTMLの記述

<form class="js-form-storage">
  <input type="text" name="first-name" />
  <input type="text" name="last-name" />
  <input type="email" name="email" />
  <input type="password" name="password" />
  <label>
    <input type="checkbox" class="js-persist" />
    Allow to store the form-data to the localstorage.
  </label>
</form>

JavaScriptの記述

window.addEventListener('DOMContentLoaded', function(){
  new FormStorage('.js-form-storage', {
    name: 'form-storage', //localstorage name
    ignores: [ // 無視する要素のセレクター
      '[type="password"]'
    ],
    checkbox: '.js-persist' //ここのセレクターがチェックされている場合にフォームのデータを保存
  });
});

オプション

FormStorageにはその他いくつかのオプションが用意されています。

オプション名	デフォルト値	説明
`name`	'form'	保存するローカルストレージ名
`ignores`	[]	無視するセレクターの配列。ここに設定されたセレクター群はローカルストレージに保存されず、復元されません。
`includes`	[]	含めるセレクターの配列。ここに指定されたセレクター群のみローカルストレージに保存され、復元されます。
`checkbox`	null	チェックボックスのセレクター、ここでチェックボックスのセレクターが指定されていると、チェックがある場合のみ、ローカルストレージに保存されます。

メソッド

FormStorageではインスタンスよりいくつかのメソッドを実行することができます。
下はそのメソッドの実行例です。

const formstrage = new FormStorage('.js-form-storage');
formstorage.save(); //現在のフォームの状態を保存します。
formstorage.apply(); //保存したフォームの状態を復元します。
formstorage.clear(); //保存したフォームの状態を削除します。

ダウンロード

ダウンロードはこちらから行えます。
ダウンロード

もしくは、npm、yarnを使ったインストールが可能です。

npm install form-storage --save

yarn add form-storage

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

const FormStorage = require('form-storage');

Babelをお使いの方はimportもご利用いただけます。

import FormStorage from 'form-storage';