使用localstorage HTML5保存表单

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

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

form <:::::::::::: getFROM ::::::::::::::: localstorage

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

 First name: 
 Last name:  store into local storage 
 render from data again  
 

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作为依赖项。

例如：

  First name: 
 Last name:  store into local storage  render from data again  
 

可以像这样处理：

 // 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"); });