InputManJSでは、フォームデータを永続化して、再読み込みしてもフォームデータが失われないようにするクラスGcFormPersistenceを提供しています。
フォームの永続化
GcFormPersistenceクラスに永続化したいフォーム要素を指定し、persistメソッドを実行します。
GcFormPersistenceクラスではInputManJSが提供しているコントロールに加えて、以下のHTML標準の要素をサポートしています。
要素名
備考
input要素
type属性が以下の要素は保存されません button、file、password、reset、submit
select要素
textarea要素
またInputManJSのテキストコントロール(GcTextBox)でパスワード表示となっている時、データは保存されません。
保存のタイミングと保存先の設定
GcFormPersistenceクラスでは、saveModeプロパティを指定することで、データを保存するタイミングを設定することができます。
値
説明
SaveMode.SaveOnRefresh
ブラウザ更新時に保存します。
SaveMode.SaveOnSubmit
ブラウザ更新時とデータ送信時に保存します。
また、storageModeプロパティを指定することで、データの保存先を設定することができます。
値
説明
StorageMode.LocalStorage
ローカルストレージにデータを保存します。
StorageMode.SessionStorage
セッションストレージにデータを保存します。
サードパーティ製ライブラリのデータの永続化
GcFormPersistenceクラスではIThirdpartyEditorを設定することで、サードパーティ製ライブラリのデータを永続化することができます。
このデモでは一例としてWijmoのInputNumberのデータを永続化する方法を紹介しています。
またはサードパーティ製のライブラリのデータを保存したくない・保存する必要がない場合は、明示的にskipメソッドを実行する必要があります。
import '@mescius/inputman/CSS/gc.inputman-js.css';
import '@mescius/wijmo.styles/wijmo.css';
import './license';
import './wijmoRule';
import { InputMan } from '@mescius/inputman';
import * as wjcInput from '@mescius/wijmo.input';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
//オプション要素の永続化を実行する
let op = new GC.InputMan.GcFormPersistence(document.getElementById('op'));
op.persist();
let save_mode = document.getElementById('onSubmit').checked ? InputMan.SaveMode.SaveOnSubmit : InputMan.SaveMode.SaveOnRefresh;
let storage_mode = document.getElementById('session').checked ? InputMan.StorageMode.SessionStorage : InputMan.StorageMode.LocalStorage;
// テキストコントロール
const gcTextBox = new InputMan.GcTextBox(document.getElementById('gcTextBox'));
// マスクコントロール
const gcMask = new InputMan.GcMask(document.getElementById('gcMask'), {
formatPattern: '〒\\D{3}-\\D{4}'
});
// 数値コントロール
const gcNumber = new InputMan.GcNumber(document.getElementById('gcNumber'));
// 日付時刻コントロール
const gcDateTime = new InputMan.GcDateTime(document.getElementById('gcDateTime'));
let fp = new GC.InputMan.GcFormPersistence(document.getElementById('imfm'), {
saveMode: save_mode,
storageMode: storage_mode
});
//InputManJSフォームの永続化を実行する
fp.persist();
//WijmoInputNumberコントロール
const theNumber = new wjcInput.InputNumber('#theNumber');
//wijmoフォームの永続化を実行する
let wjfp = new GC.InputMan.GcFormPersistence(document.getElementById('wjfm'), {
saveMode: save_mode,
storageMode: storage_mode
});
wjfp.persist();
//標準のHTML要素の永続化を実行する
let htmlfp = new GC.InputMan.GcFormPersistence(document.getElementById('htmlfm'), {
saveMode: save_mode,
storageMode: storage_mode
});
htmlfp.persist();
document.getElementById('refresh').addEventListener('click', () => {
window.parent.location.reload();
});
document.getElementById('onReload').addEventListener('click', () => {
fp.saveMode = GC.InputMan.SaveMode.SaveOnRefresh;
wjfp.saveMode = GC.InputMan.SaveMode.SaveOnRefresh;
htmlfp.saveMode = GC.InputMan.SaveMode.SaveOnRefresh;
op.saveMode = GC.InputMan.SaveMode.SaveOnRefresh;
});
document.getElementById('onSubmit').addEventListener('click', () => {
fp.saveMode = GC.InputMan.SaveMode.SaveOnSubmit;
wjfp.saveMode = GC.InputMan.SaveMode.SaveOnSubmit;
htmlfp.saveMode = GC.InputMan.SaveMode.SaveOnSubmit;
op.saveMode = GC.InputMan.SaveMode.SaveOnSubmit;
});
document.getElementById('local').addEventListener('click', () => {
fp.storageMode = GC.InputMan.StorageMode.LocalStorage;
wjfp.storageMode = GC.InputMan.StorageMode.LocalStorage;
htmlfp.storageMode = GC.InputMan.StorageMode.LocalStorage;
});
document.getElementById('session').addEventListener('click', () => {
fp.storageMode = GC.InputMan.StorageMode.SessionStorage;
wjfp.storageMode = GC.InputMan.StorageMode.SessionStorage;
htmlfp.storageMode = GC.InputMan.StorageMode.SessionStorage;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本機能 - フォーム永続化</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
InputManJSコントロール：
<form id="imfm" action="" target="_parent">
<div class="flexbox">
<div>
テキストコントロール<br>
<input id="gcTextBox">
</div>
<div>
マスクコントロール<br>
<input id="gcMask">
</div>
<div>
数値コントロール<br>
<input id="gcNumber">
</div>
<div>
日付時刻コントロール<br>
<input id="gcDateTime">
</div>
</div>
</form>
Wijmoコントロール：
<form id="wjfm">
InputNumber<br>
<div id="theNumber" name="number"></div>
</form>
<br>HTML入力要素：
<form id="htmlfm">
<input id="input">
</form>
<form id="op">
<table class="sample">
<tr>
<th>保存するタイミング</th>
<td>
<label><input type="radio" id="onReload" value = "0" name="saveMode" checked>ブラウザ更新時に保存する</label>
<label><input type="radio" id="onSubmit" value = "1" name="saveMode" >データ送信時にも保存する</label>
</td>
</tr>
<tr>
<th>データの保存先</th>
<td>
<label><input type="radio" id="local" value = "0" name="storageMode" checked>ローカルストレージ</label>
<label><input type="radio" id="session" value = "1" name="storageMode" >セッションストレージ</label>
</td>
</tr>
</table>
</form>
<br>
<button type="button" id="refresh">ブラウザを更新する</button>
<input type="submit" form="imfm" value="フォームデータを送信する">
</body>
</html>
//Wijmoの永続化を行うためのルール(IThirdpartyEditor)を設定します。
import * as wjcCore from '@mescius/wijmo';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
function WijmoRule() { }
WijmoRule.prototype = {
/**
* 要素をスキップする際の処理を設定します。
* @param {HTMLElement} element ホスト要素からのHtml要素
*/
skip: function (ele) {
//今回はスキップしたい要素はないのでfalseを設定します。
return false;
},
/**
* 要素がサードパーティのコントロールかどうかを判断し、
* そうである場合にストレージキーの利用するnameを設定する処理を定義します。
* @param {HTMLElement} element ホスト要素からのHtml要素
*/
checker: function (ele) {
//wijmoは常に最も外側の要素にクラスに「wj-control」を追加するため、
//以下の条件で要素がwijmoコントロールかどうかを確認できます。
if (ele.classList.contains("wj-control")) {
return ele.getAttribute("name");
}
return "";
},
/**
* ページの更新やフォームの送信時にコントロールの値をストレージに保存する際の処理を定義します。
* @param {ElementContext} context 現在のGcFormPersistence、現在の要素、要素名の情報
* interface ElementContext {
* formPersistence: GcFormPersistence;
* element: HTMLElement;
* name: string;
* }
*/
save: function (context) {
//最初にcontent.elementによってコントロールインスタンスを取得します。
var wijmo_control = wjcCore.Control.getControl(context.element);
//次にGcFormPersistenceのインスタンスを利用して、setValueメソッドで値を保存します。
//setValueの第1引数にはcheckerメソッドで設定したストレージキー名、
//第2引数はストレージに保存する値をそれぞれ指定します。
context.formPersistence.setValue(context.name, wijmo_control.value);
},
/**
* ページがロードされたときにストレージからコントロールの値を復元する際の処理を定義します。
* @param {ElementContext} context 現在のGcFormPersistence、現在の要素、要素名の情報
* interface ElementContext {
* formPersistence: GcFormPersistence;
* element: HTMLElement;
* name: string;
* }
*/
restore: function (context) {
//最初にcontent.elementによってコントロールインスタンスを取得します。
var wijmo_control = wjcCore.Control.getControl(context.element);
//次にGcFormPersistenceのインスタンスを利用して、getValueメソッドで値を取得します。
//getValueメソッドの引数は保存時に設定したストレージキー名を指定し、
//戻り値を復元したいコントロールインスタンスのプロパティに設定します。
wijmo_control.value = Number(context.formPersistence.getValue(context.name));
},
};
//registerEditorメソッドにWijmo永続化のルールを設定する
InputMan.GcFormPersistence.registerEditor(new WijmoRule());
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
