Framework7表单存储 Framework7表单存储|Framework7

本文概述

启用表格存储示例
表单存储JavaScript API示例

Framework7表单存储用于自动在Ajax加载的页面上存储和解析表单数据。每次再次加载页面时, Framework7都会解析此数据并自动填写表单。
表单存储有两种类型：
启用表单存储：如果要启用表单存储, 则必须向表单添加store-data类和id属性。
【Framework7表单存储】表单存储JavaScript API：可以使用JavaScript API实现表单存储。
启用表格存储示例让我们以显示表单存储为例, 该存储存储在表单中输入的数据, 并在重新加载页面时自动解析表单数据。

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Enable form storage< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Enable form storage< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block"> Just fill the form and reload the page, your form fields will keep your data.< /div> < 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"> < input type = "text" name = "name" placeholder = "Enter 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"> < input type = "email" name = "email" placeholder = "Enter your e-mail"> < /div> < /div> < /div> < /li> < li> < div class = "item-content"> < div class = "item-inner"> < div class = "item-title label"> Gender< /div> < div class = "item-input"> < select name = "gender"> < option value = "http://www.srcmini.com/male" selected> Male< /option> < option value = "http://www.srcmini.com/female"> Female< /option> < /select> < /div> < /div> < /div> < /li> < li> < div class = "item-content"> < div class = "item-inner"> < div class = "item-title label"> Switch< /div> < div class = "item-input"> < label class = "label-switch"> < input type = "checkbox" name = "switch" value = "http://www.srcmini.com/yes" /> < div class = "checkbox"> < /div> < /label> < /div> < /div> < /div> < /li> < /ul> < /form> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
表单存储JavaScript API示例在Form Storage JavaScript API中, 所有表单数据都通过键存储在本地存储中。有一些方法可以使用表单数据管理这些本地存储密钥。

指数	类	描述
1)	myApp.formGetData(formId)	当你打开动画时, 将触发此事件。
2)	myApp.formDeleteData(formId)	动画的打开完成后, 将触发此事件。
3)	myApp.formStoreData（formId, formJSON）	当你关闭动画时, 将触发此事件。

例
让我们以一个示例来演示表单存储JavaScript API的用法, 该API将数据存储在Framework7的本地存储中。

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Form storage JavaScript API< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Form Storage API< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < form id = "myform" 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"> < input type = "text" name = "name" placeholder = "Enter 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"> < input type = "email" name = "email" placeholder = "Enter your e-mail"> < /div> < /div> < /div> < /li> < li> < div class = "item-content"> < div class = "item-inner"> < div class = "item-title label"> Gender< /div> < div class = "item-input"> < select name = "gender"> < option value = "http://www.srcmini.com/male" selected> Male< /option> < option value = "http://www.srcmini.com/female"> Female< /option> < /select> < /div> < /div> < /div> < /li> < li> < div class = "item-content"> < div class = "item-inner"> < div class = "item-title label"> Switch< /div> < div class = "item-input"> < label class = "label-switch"> < input type = "checkbox" name = "switch" value = "http://www.srcmini.com/yes" /> < div class = "checkbox"> < /div> < /label> < /div> < /div> < /div> < /li> < /ul> < /form> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button button-fill button-round color-blue get-storage-data"> Get Data< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-fill button-round color-red delete-storage-data"> Delete Data< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-fill button-round color-green save-storage-data"> Save Data< /a> < /p> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); var $$ = Dom7; $$('.get-storage-data').on('click', function() {var storedData = http://www.srcmini.com/myApp.formGetData('myform'); if(storedData) {alert(JSON.stringify(storedData)); } else {alert('Yet there is no stored data for this form. Please try to change any field')}}); $$('.delete-storage-data').on('click', function() {var storedData = http://www.srcmini.com/myApp.formDeleteData('myform'); alert('Form data is deleted')}); $$('.save-storage-data').on('click', function() {var storedData = http://www.srcmini.com/myApp.formStoreData('myform', {'name': 'William Smith', 'email': 'williamsmith@tutorialspoint.com', 'gender': 'male', 'switch': ['yes'], }); alert('Form data is replaced, refresh the browser to reflect the changes')}); < /script> < /body> < /html>

立即测试