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

Framework7 可以很方便存储和解析表单的数据，特别是在 Ajax 加载的页面。并且，当你再次加载相同的页面之后，Framework7 可以自动帮你填充上次的内容!

启用表单自动存储

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

• 在表单上增加一个 "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都包含了一个表单的所有数据。

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

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