移动端安卓和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. });

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

原文：http://zaixianshouce.iteye.com/blog/2306793