Framework7 表单存储

17 Mar 2025 | 4 分钟阅读

Framework7 表单存储用于在 Ajax 加载的页面上自动存储和解析表单数据。每次页面重新加载时，Framework7 都会解析这些数据并自动填充表单。

有两种类型的表单存储

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

表单存储 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 = "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>
               </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 示例

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

索引	Class	描述
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 = "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>

立即测试

下一个主题Framework7 智能选择

Framework7 表单存储

启用表单存储示例

表单存储 JavaScript API 示例

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 表单存储

启用表单存储示例

表单存储 JavaScript API 示例

示例

相关帖子

F7 禁用元素

F7 图标输入

F7 复选框 & 单选框

Ajax 表单提交

F7 标签 & 输入

F7 智能选择

F7 插入

F7 完整布局表单

F7 表单

F7 表单数据

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器