Javascript Girl
  1. Javascript Girl
  3. Enregistrer le formulaire à l'aide de localstorage HTML5
Intereting Posts
Quelle est la différence entre la fonction exec () de RegExp et la fonction Match () de String? Quelle est la différence entre removeProp et removeAttr dans JQuery 1.6? Modifier le tableau des options d'une liste de sélection IE8 html select a besoin de deux clics pour ouvrir la liste déroulante Comment appeler le code de service AngularJS à partir de la visionneuse Android? GWT – "Accès refusé" Erreur JavaScript lors du réglage document.domain dans Internet Explorer uniquement Comment puis-je obtenir Knockout JS à la liaison de données sur la touche à la place de la perte de focus? Modifier l'arrière-plan de l'en-tête fixe lors du défilement des éléments passés Passer la valeur en fonction et la portée variable dans JQuery JQuery samples Pourquoi pour … obtient toutes les propriétés, mais pour … de ne pas avoir toutes les valeurs? Comment créer une API de diffusion avec NodeJS TinyMCE avec AJAX (Update Panel) n'a jamais de valeur Jquery obtient les valeurs de toutes les lignes vérifiées dans table gridview Comment réparer une indentation Javascript incorrecte dans Vim?

Enregistrer le formulaire à l'aide de localstorage HTML5

Existe-t-il un moyen d'enregistrer dans le stockage local et de le réutiliser à nouveau, comme cette logique:

Forme :::::::::::: saveURTO ::::::::::::::::::::::::::::::::::::::::::::::::::::::

Forme <:::::::::::: getFROM ::::::::::::::: localstorage

Après avoir rempli le formulaire avec les données, je souhaite enregistrer le formulaire avec son contenu dans le stockage local, puis, lorsque je veux compléter d'autres fichiers avec les données stockées. 

<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> <button onclick="StoreData();">store into local storage</button> </form> <button onclick="RenderForm();">render from data again </button> <form id="Copyform"><form>

JSFIDDLE s'il vous plaît répondre JSFIDDLE.

ACTUALISÉ

Vous pouvez le faire facilement, mais si vous souhaitez stocker un tableau, vous devez le sérialiser ou l'encoder d'abord car localStorage ne traite pas les tableaux. par exemple:

var yourObject = $('#your-form').serializeObject();

Pour sauvegarder, vous faites soit:

localStorage['variablename'] = JSON.stringify(yourObject) ou localStorage.setItem('testObject', JSON.stringify(yourObject));

Et pour récupérer: JSON.parse(localStorage['yourObject']); Ou JSON.parse(localStorage.getItem('yourObject')); Et ensuite les valeurs de champs sont disponibles en tant que yourObject.fieldName ;

EDIT: Dans l'exemple ci-dessus, j'ai utilisé serializeObject qui est un plugin jQuery. Le code utilisé est ci-dessous. (Vous pouvez utiliser serializeArray si vous préférez, mais vous devrez faire plus de travail pour rendre vos données utilisables une fois récupérées): 

 jQuery.fn.serializeObject = function () { var formData = {}; var formArray = this.serializeArray(); for(var i = 0, n = formArray.length; i < n; ++i) formData[formArray[i].name] = formArray[i].value; return formData; };

Une autre option serait d'utiliser un plugin existant.

Par exemple, persisto est un projet open source qui fournit une interface facile à localStorage / sessionStorage et automatise la persistance des champs de formulaire (entrée, boutons radio et cases à cocher).
(Avertissement: je suis l'auteur.)

Caractéristiques persisto

Notez que cela nécessite jQuery en tant que dépendance.

Par exemple: 

 <form id="originalForm"> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> <button type="submit">store into local storage</button> </form> <button id="renderForm">render from data again </button> <form id="copyForm"><form>

Pourrait être traité comme suit: 

 // Maintain client's preferences in localStorage: var settingsStore = PersistentObject("mySettings"); // Initialize form elements with currently stored data settingsStore.writeToForm("#originalForm"); // Allow users to edit and save settings: $("#settingsForm").submit(function(e){ // ... maybe some validations here ... settingsStore.readFromForm(this); e.preventDefault(); }); // Write data to another form: $("#renderForm").submit(function(e){ settingsStore.writeToForm("#copyForm"); });