Framework7 - 表单存储 JavaScript API
描述
可以使用 JavaScript API 实现表单存储。这里,Framework7 在任何输入更改时调用 formToJSON,并在 pageInit 事件上调用 formFromJSON。所有表单数据都使用密钥存储在本地存储中。应用程序管理这些带有表单数据的本地存储密钥的方法列于下方 −
S.No | 类 &描述 | 参数 |
---|---|---|
1 | myApp.formGetData(formId) 打开动画时,将触发此事件。 |
|
2 | myApp.formDeleteData(formId) 当动画打开完成后,将触发此事件。 |
|
3 | myApp.formStoreData(formId, formJSON) 当您关闭动画时,将触发此事件。 |
|
示例
以下示例演示了在 Framework7 中使用表单存储 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>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 = "male" selected>Male</option> <option value = "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 = "yes" /> <div class = "checkbox"></div> </label> </div> </div> </div> </li> </ul> </form> <div class = "content-block"> <p><a href = "#" class = "button button-fill button-round color-blue get-storage-data">Get Data</a></p> <p><a href = "#" class = "button button-fill button-round color-red delete-storage-data">Delete Data</a></p> <p><a href = "#" 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 = 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 = myApp.formDeleteData('myform'); alert('Form data is deleted') }); $$('.save-storage-data').on('click', function() { var storedData = 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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 forms_storage_javascript.html 文件。
以 http://localhost/forms_storage_javascript.html 的形式打开此 HTML 文件,输出显示如下。
当您在表单中输入详细信息并单击"获取数据"按钮时,所有字段值都将转换为 JSON 格式并显示给您。
单击"保存数据"按钮时,表单数据将保存在本地存储中。
单击"删除数据"按钮时,所有表单数据都将被删除。