フォーム永続化

このサンプルではブラウザの再読み込みを実行してもInputManJSのコントロールに入力したデータが失われないことを確認できます。また、保存タイミングや保存先などを指定できます。

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 '@grapecity/inputman/CSS/gc.inputman-js.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './license'; import './wijmoRule'; import { InputMan } from '@grapecity/inputman'; import * as wjcInput from '@grapecity/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> 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 '@grapecity/wijmo'; import { InputMan } from '@grapecity/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: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/CSS', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.input': 'npm:@grapecity/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' }, } });