Mobile Android and IOS development framework Framework7 tutorial - form storage (form storage)

Framework7 makes it easy to store and parse form data, especially in Ajax loaded pages. And, when you load the same page again, Framework7 can automatically fill in the last content for you!

Enable form autostorage

To enable automatic form storage, simply:

• Add a "store-data" class to the form
• Add an id attribute to the form. If there is no id, it will not work properly.
• Make sure your inputs have a "name" attribute, inputs without a name attribute will be ignored

Automatic form storage without any JS code

1. <!-- Form has additional "store-data" class to enable form storage on this form -->
2. <formid="my-form"class="list-block store-data">  
3.   <ul>
4.     <li>
5.       <divclass="item-content"> 
6.         <divclass="item-inner"> 
7.           <divclass="item-title label">Name</div> 
8.           <divclass="item-input"> 
9.             <!-- Make sure that input have "name attrobute" -->
10.             <inputtype="text"name="name"placeholder="Your name">   
11.           </div>
12.         </div>
13.       </div>
14.     </li>
15.     <li>
16.       <divclass="item-content"> 
17.         <divclass="item-inner"> 
18.           <divclass="item-title label">E-mail</div> 
19.           <divclass="item-input"> 
20.             <!-- Make sure that input have "name attrobute" -->
21.             <inputtype="email"name="email"placeholder="E-mail">   
22.           </div>
23.         </div>
24.       </div>
25.     </li>
26.     ... other form fields ...
27.   </ul>
28. </form>

copy

Instance preview

JS API

How is this achieved? It's actually very simple, Framework7 will call formToJSON when the form has any changes, and then call formFromJSON when the "pageInit" event fires.

All form data are stored in localStorage, each form has its own key, the key rules are: localStorage.f7form-[formID], where [formId] is the id attribute of the form. Each such key contains all the data for a form.

Below are some of the available methods for managing form data

myApp.formGetData(formId) - 获取id对应的表单的数据

• formId - 字符串 - form 的id
• 返回一个JSON数据

myApp.formDeleteData(formId) - 删除id对应的表单数据

• formId - 字符串 - form 对应的id

myApp.formStoreData(formId, formJSON) - store formJSON data for form with formId "id" attribute

myApp.formStoreData(formId, formJSON) - 把一个JSON数据存储到一个表单对应的localStorage中

• formId - 字符串 - 表单的id属性
• formJSON - 对象 - 要存储的JSON对象

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

复制

1. var myApp = new Framework7();  
2.  
3. var $$ = Dom7;
4.  
5. $$('.get-storage-data').on('click', function() {
6.   var storedData = myApp.formGetData('my-form2');
7.   if(storedData) {
8.     alert(JSON.stringify(storedData));
9.   }
10.   else {
11.     alert('There is no stored data for this form yet. Try to change any field')
12.   }
13. });
14.  
15. $$('.delete-storage-data').on('click', function() {
16.   var storedData = myApp.formDeleteData('my-form2');
17.   alert('Form data deleted')
18. });
19.  
20. $$('.save-storage-data').on('click', function() {
21.   var storedData = myApp.formStoreData('my-form2', {
22.     'name': 'John',
23.     'email': '[email protected]',
24.     'gender': 'female',
25.     'switch': ['yes'],
26.     'slider': 10
27.   });
28.   alert('Form data replaced, refresh browser to see changes')
29. });

复制

实例预览

Form storage JavaScript Events

Event Target Description

formFromJSON	Form element	Event will be triggered after formFromJSON method called on form to fill form fields
formToJSON	Form element	Event will be triggered after formToJSON method called on form to convert form fields to JSON