Framework7 - API JavaScript de almacenamiento de formularios
Descripción
El almacenamiento de formularios se puede lograr utilizando la API de JavaScript. Aquí, Framework7 invoca formToJSON en cualquier cambio de entrada y formFromJSON en el evento pageInit . Todos los datos de los formularios se almacenan en el almacenamiento local con claves. Los métodos de la aplicación para administrar estas claves de almacenamiento local con datos de formulario se enumeran a continuación:
| S. No | Clases y descripción | Parámetros |
|---|---|---|
| 1 | myApp.formGetData(formId) Cuando abres una animación, este evento se activará. |
|
| 2 | myApp.formDeleteData(formId) Cuando se completa la apertura de una animación, este evento se activará. |
|
| 3 | myApp.formStoreData(formId, formJSON) Cuando cierras una animación, este evento se activará. |
|
Ejemplo
El siguiente ejemplo demuestra el uso de la API de JavaScript de almacenamiento de formularios que almacena datos en el almacenamiento local en 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': '[email protected]',
'gender': 'male',
'switch': ['yes'],
});
alert('Form data is replaced, refresh the browser to reflect the changes')
});
</script>
</body>
</html>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como forms_storage_javascript.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/forms_storage_javascript.html y el resultado se muestra como se muestra a continuación.
Cuando ingrese los detalles en el formulario y haga clic en el botón 'Obtener datos', todos los valores de sus campos se convertirán al formato JSON y se le mostrarán.
Cuando se hace clic en el botón 'Guardar datos', los datos de los formularios se guardan en el almacenamiento local.
Cuando se hace clic en el botón 'Eliminar datos', se eliminan todos los datos de los formularios.