使用localstorage HTML5保存表单

Question

有没有办法将从保存到 localstorage 并重新使用它，就像这个逻辑：

表格 :::::::::::: saveINTO ::::::::::::::::＆gt; localstorage

表格＆lt; :::::::::::: 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不处理数组。 e.g：

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;

编辑：在上面的例子中，我使用了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");
});