Framework7表单存储

📌 相关文章

📜 Framework7表单存储

📅 最后修改于: 2021-01-02 06:04:23 🧑 作者: Mango

Framework7表单存储用于在Ajax加载的页面上自动存储和解析表单数据。每次再次加载页面时，Framework7都会解析此数据并自动填写表单。

表单存储有两种类型：

启用表单存储：如果要启用表单存储，则必须向表单添加store-data类和id属性。

表单存储JavaScript API：可以使用JavaScript API实现表单存储。

启用表格存储示例

让我们以显示表单存储为例，该存储存储在表单中输入的数据，并在重新加载页面时自动解析表单数据。




   
      
      
      
      Enable form storage
      
      
   

   
      
         
            
               
                  
                  
                     
                         
                        Enable form storage
                         
                     
                  
                  
                  
                     Just fill the form and reload the page, your form 
                     fields will keep your data.
                     
                        
                           
                              
                                 
                                    Name
                                    
                                       
                                    
                                 
                              
                           
                           
                           
                              
                                 
                                    E-mail
                                    
                                       
                                    
                                 
                              
                           
                           
                           
                              
                                 
                                    Gender
                                    
                                       
                                    
                                 
                              
                           
                           
                           
                              
                                 
                                    Switch

表单存储JavaScript API示例

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

Index	Class	Description
1)	myApp.formGetData(formId)	When you open an animation, this event will get fired.
2)	myApp.formDeleteData(formId)	When the opening of an animation is completed, this event will get fired.
3)	myApp.formStoreData(formId, formJSON)	When you close an animation, this event will get fired.

例

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




   
      
      
      
      Form storage JavaScript API
      
      
   

   
      
         
            
               
                  
                  
                     
                         
                        Form Storage API
                         
                     
                  
                  
                  
                     
                        
                           
                              
                                 
                                    Name
                                    
                                       
                                    
                                 
                              
                           
                           
                           
                              
                                 
                                    E-mail
                                    
                                       
                                    
                                 
                              
                           
                           
                           
                              
                                 
                                    Gender
                                    
                                       
                                    
                                 
                              
                           
                           
                           
                              
                                 
                                    Switch
                                    
                                       
                                          
                                          
                                       
                                    
                                 
                              
                           
                        
                     
                     
                     
                        
                        
                        Get Data
                        
                        
                        Delete Data
                        
                        
                        Save Data