latest
latest

フォーム永続化

本製品では、フォームデータを永続化して、ページの再読み込みや、フォーム送信してもフォームデータが失われないようにするGcFormPersistenceクラスを提供します。

適用可能なコントロール

GcFormPersistenceクラスは、以下のコントロールに適用できます。

InputManJSコントロール

  • テキストコントロール(GcTextBox)
  • マスクコントロール(GcMask)
  • コンボコントロール(GcComboBox)
  • 数値コントロール(GcNumber)
  • 日付時刻コントロール(GcDateTime)
  • 複数行テキストコントロール(GcMultiLineTextBox)

標準HTML要素

  • input要素
    ただし、type属性が以下の要素は保存されません。
    button、file、password、reset、submit
  • select要素
  • textarea要素

サードパーティ製ライブラリ
IThirdpartyEditorインタフェースを設定することで、サードパーティ製ライブラリのデータを永続化することができます。

フォーム永続化の使用方法の詳細はオンラインデモをご参照ください。

保存のタイミングと保存先

フォーム永続化機能は、保存のタイミングと保存先として以下の方法を提供します。

【保存のタイミング】

  • ブラウザ更新時
  • ブラウザ更新時とデータ送信時

【保存先】

  • ローカルストレージ
  • セッションストレージ

基本的な使用方法

フォーム永続化の基本的な使用手順は以下の通りです。

  1. Form要素に、データ入力を行うコントロールやHTML要素を配置します。

  2. GcFormPersistenceクラスに永続化したいForm要素を指定します。必要に応じて、保存のタイミング(saveModeプロパティ)や保存先(storageModeプロパティ)を設定します。

  3. persistメソッドを実行します。

以下の例では、テキストコントロールとHTML input要素が配置されているフォームデータを永続化します。

<body>
    <form id="persistenceForm">
        テキストコントロール:<input id="gcTextBox"><br>
        HTML input要素:<input id="sttext" type="text">
    </form>

    <script>
      gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox'));

      //保存したいフォーム要素を引数に指定する
      let fp = new GC.InputMan.GcFormPersistence(document.getElementById('persistenceForm'), {
          saveMode: GC.InputMan.SaveMode.SaveOnSubmit,
          storageMode: GC.InputMan.StorageMode.SessionStorage
      });

      //persistメソッドを実行する
      fp.persist();
    </script>
</body>