Form Storage

Enable from storage

To enable form storage for specific form, all you need is:

• add "store-data" class to form
• add "id" attribute to from. It will not work if form doesn't have "id" attribute
• make sure that all you inputs have "name" attributes, otherwise they will be ignored

JavaScript is not required

<!-- Form has additional "store-data" class to enable form storage on this form -->
<form id="my-form" class="list-block store-data">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <!-- Make sure that input have "name attrobute" -->
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">E-mail</div>
          <div class="item-input">
            <!-- Make sure that input have "name attrobute" -->
            <input type="email" name="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    ... other form fields ...
  </ul>
</form>

Form storage JavaScript API

So how this works. Everything is simple, actually Framework7 just calls formToData on any input change and formFromData on 'page:init' event

All forms data stored in Local Storage and each form has its own Local Storage key which is named by the following rule: localStorage.f7form-[formID] where [formId] is related form's "id" attribute. Each such Local Storage key contains stringified JSON with form data.

So let's look at App's methods that could be helpful to manage these Local Storage keys with form data

<form id="my-form2" class="list-block store-data">
  ... form fields ...
</form>
<div class="content-block">
  <p><a href="#" class="button get-storage-data">Get Data</a></p>
  <p><a href="#" class="button delete-storage-data">Delete Data</a></p>
  <p><a href="#" class="button save-storage-data">Save Data</a></p>
</div>

var myApp = new Framework7();  
 
var $$ = Dom7;
 
$$('.get-storage-data').on('click', function() {
  var storedData = myApp.formGetData('my-form2');
  if(storedData) {
    alert(JSON.stringify(storedData));
  }
  else {
    alert('There is no stored data for this form yet. Try to change any field')
  }
});
 
$$('.delete-storage-data').on('click', function() {
  var storedData = myApp.formDeleteData('my-form2');
  alert('Form data deleted')
});
 
$$('.save-storage-data').on('click', function() {
  var storedData = myApp.formStoreData('my-form2', {
    'name': 'John',
    'email': '[email protected]',
    'gender': 'female',
    'switch': ['yes'],
    'slider': 10
  });
  alert('Form data replaced, refresh browser to see changes')
});