挪动端安卓和IOS开发框架Framework7教程-表单存储(form storage)

启用表单自动存储

要启用表单自动存储功能，只需要：

• 在表单上增加一个 "store-data" class
• 在表单上增加一个 id 属性。如果没有 id, 无法正常工作的。
• 确保你的input都有 "name" 属性，没有name属性的input将会被忽略

不需要任何JS代码就可以实现表单自动存储

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

实例预览

JS API

这是怎么实现的？其实非常简单，Framework7 会在表单有任何改动的时候调用 formToJSON，然后在"pageInit" 事件触发时调用 formFromJSON。

所有的表单数据都存储在 localStorage 中，每一个表单都有一个自己的key，key的规则是：localStorage.f7form-[formID]，其中 [formId] 就是表单的 id 属性。每一个这样的key都包含了一个表单的所有数据。

下面是一些管理表单数据的可用的方法

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': 'john@doe.com',
24.     'gender': 'female',
25.     'switch': ['yes'],
26.     'slider': 10
27.   });
28.   alert('Form data replaced, refresh browser to see changes')
29. });