[{"id":"471bd01d-2c55-4895-b46f-811c4eed7571","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"da208fce-85ad-4c35-a5e3-87ff194b17ed","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"ac6cc2b2-6ddb-42d4-8bfa-95509e6448e2","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"99c67dff-427d-41b4-a4b0-144ec624500b","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"21d10235-4abe-486e-8859-6aa2f7edc442","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"361f2cdd-a34a-446b-8f53-16b7c82fb69a","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"2a3cece3-ed23-4e9f-a71f-226657337d2c","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"d8001871-044e-4afc-899d-e4104efcfbde","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"feb1cbab-9f1e-4233-b9db-11b2b9156c6d","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"a7942aeb-844b-42a6-83df-1c0aa8da3d0e","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"318074f6-ca29-4ed9-adb6-af319ab87121","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"3c29b05e-ef44-48c3-b836-6743680fa52a","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"5b86275f-ec58-4d09-b5c9-f0047fc3d2f3","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"55a78d7c-a608-4ff6-bb3c-f5993afc8631","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"64e9c9e5-dc70-4dcc-b101-824c175010f9","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"e7dd5528-b482-4399-9d5d-38d10a9b0ddb","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]}]

フォーム永続化

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

適用可能なコントロール

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

InputManJSコントロール

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

標準HTML要素

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

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

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

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

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

【保存のタイミング】

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

【保存先】

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

基本的な使用方法

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

Form要素に、データ入力を行うコントロールやHTML要素を配置します。
GcFormPersistenceクラスに永続化したいForm要素を指定します。必要に応じて、保存のタイミング（saveModeプロパティ）や保存先（storageModeプロパティ）を設定します。
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>