javascript - 使用 localstorage HTML5 保存表单

Question

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

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

形成 <::::::::::::::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；

编辑:在上面的示例中，我使用了 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;
};