Сохранить форму с помощью LocalStorage HTML5

Question

Есть ли способ сэкономить из в LocalStorage и повторно использовать его снова, как эта логика:

формы :::::::::::: saveINTO :::::::::::::::> LocalStorage

< форма :::::::::::: GETFROM :::::::::::: ::: localstorage

после заполнения формы данными, Я хочу сохранить форму с ее содержимым в localstorage, а затем, когда хочу заполнить другую из сохраненных данных.

<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 пожалуйста JSFIDDLE ответ.

ОБНОВЛЕНО

Answer 1

Вы можете сделать это легко, но если вы хотите сохранить массив вам нужно сериализовать или кодировать его первым, потому что LocalStorage не имеет дело с массивами. например .:

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

Чтобы сохранить вы либо:

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

и получить: JSON.parse(localStorage['yourObject']); или JSON.parse(localStorage.getItem('yourObject'));, а затем значения полей доступны как yourObject.fieldName;

EDIT: В приведенном выше примере я использовал serializeObject, который является плагином jQuery. Используемый код приведен ниже. (Вы можете использовать serializeArray, если вы предпочитаете, но вы должны будете сделать больше работы, чтобы сделать данные пригодными для использования один раз извлекаться):

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; 
}; 

Answer 2

Другим вариантом было бы использовать существующий плагин.

Например, persisto - это проект с открытым исходным кодом, который обеспечивает легкий интерфейс для localStorage/sessionStorage и автоматизирует сохранение для полей формы (ввода, переключателей и флажков).
:

Обратите внимание, что это требует JQuery как зависимость (Отказ от ответственности Я автор.).

Например:

<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> 

может быть обработан следующим образом:

// 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"); 
});