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

есть ли способ сохранить С на localstorage и повторите его снова, как эта логика:

форма ::::::::::::saveINTO:::::::::::::::> localstorage

форма 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 ответа.

обновлено

8
forms html5 javascript jquery local-storage

2 ответов

вы можете сделать это легко, но если вы хотите сохранить массив, вам нужно будет сначала сериализовать или кодировать его, потому что 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;
};
9

другой вариант-использовать существующий плагин.

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

persisto features

обратите внимание, что для этого требуется 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");
});
2