フォームの送信内容を保存し復元するFormStorageを公開しました。
フォーム送信時にフォームの内容をローカルストレージに自動で保存し、再度そのフォームに訪れた際にストレージからデータを復元するための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';
リンク
appleple.github.io/form-storage
github.com/appleple/form-storage
