11

有没有办法保存到本地存储并再次 重用它，就像这个逻辑：

形式::::::::::::saveINTO:::::::::::::::> localstorage

表单<::::::::::::getFROM::::::::::::::: 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 回答。

更新

4

2 回答 2

11

你可以很容易地做到这一点，但如果你想存储一个数组，你需要先序列化或编码它，因为 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;
};
于 2013-11-13T11:28:28.770 回答
6

另一种选择是使用现有的插件。

例如， 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");
});
于 2016-06-16T17:05:55.927 回答