Store persistent HTML form data in Google Script - google-apps-script

Question

I wrote a Google Script web app to back up selected Gmail labels to a user-defined Google Drive location. Forml.html presents the data in a tabular format. On each row lives index (which is the checkbox), label and drive target.
We would like the data in each row to persist from one page load to the next so that a selected row stays selected. After I figure out how to make the data persist, then I can build a trigger which will make the app run on a schedule and back up the selected labels. Any thoughts on how best to achieve the effect of storing HTML form data over time? I'm thinking of using the properties service, but I don't know how I can change the initial doGet to choose between a blank form and a form with preexisting data.
Form.html
<div id="formDiv">
<form id="myForm" target="_self">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">
<h3 span style="font-family:arial,helvetica,sans-serif;">Select</span></th>
<th scope="col">
<h3 span style="font-family:arial,helvetica,sans-serif;">Label</span></th>
<th scope="col">
<h3 span style="font-family:arial,helvetica,sans-serif;">Drive target</span></th>
</tr>
</thead>
<tbody>
<? var label = GmailApp.getUserLabels();
for (i = 0; i < label.length; i++) { ?>
<tr>
<td style="text-align: center;">
<span style="font-family:arial,helvetica,sans-serif;"><input id="index" type="checkbox" name="index" value="<?= [i]; ?>" /></span></td>
<td>
<span style="font-family:arial,helvetica,sans-serif;"><input id="label" type="text" style="border:none" size="60" name="label" value="<?= label[i].getName(); ?>" readonly /></span></td>
<td>
<span style="font-family:arial,helvetica,sans-serif;">Gmail Backup/<input id="target" type="text" size="60" maxlength="128" name="target" value="<?= label[i].getName(); ?>" /></span></td>
</tr>
<? } ?>
</tbody>
</table>
<p><input type="submit" value="Test" onclick="google.script.run.gmailBackup(this.parentNode.parentNode)" />
</p>
</form>
</div>
Code.gs
function doGet() {
var template = HtmlService.createTemplateFromFile("Form")
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
return template;
}
function gmailBackup(template) {
// Set HTML form variables
var indices = template.index;
var labels = template.label;
var targets = template.target;
for (i = 0; i < indices.length; i++) {
var index = indices[i].toString();
var label = labels[indices[i]].toString();
var target = "Gmail Backup/" + targets[indices[i]].toString();
...
}

Answer 1

I ended up using the PropertiesService to store HTML form properties on a per-user basis. This looks like it will work quite well (especially once I find out exactly where the data is stored per Where does Google Script PropertiesService store data?).
From Form.html
<input onclick="google.script.run.setProperties(this.parentNode.parentNode);" type="submit" value="Save" >
From Code.gs
function setProperties(form) {
var filledForm = PropertiesService.getUserProperties().setProperty("FORM", form);
}