使用localstorage HTML5保存表单

Question

有没有一种方法来保存从进入localStorage的 又一次重复使用它,像这样的逻辑:

form :::::::::::: saveINTO :::::::::::::::: localstorage

form <:::::::::::: 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;

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