使用 localstorage HTML5 保存表单

Question

有没有办法将 from 保存到 localstorage 并再次重用它，就像这样的逻辑：

形成 ::::::::::::saveINTO:::::::::::::::> 本地存储

form <::::::::::::getfrom:::::::::::::::>本地存储

用数据填写表单后，我想将表单及其内容保存在本地存储中，然后当我想用存储的数据填写其他表单时。

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

编辑：在上面的示例中，我使用了一个 jQuery 插件 serializeObject。使用的代码如下。 （如果您愿意，可以使用 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");
});