javascript 使用 localstorage HTML5 保存表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19952403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save Form using localstorage HTML5
提问by Muath
Is there a way to Save frominto localstorageand reuse it again, like this logic:
有没有一种方法来保存从进入localStorage的又一次重复使用它，像这样的逻辑：
form ::::::::::::saveINTO:::::::::::::::>localstorage
形式::::::::::::saveINTO::::::::::::::>localstorage
form <::::::::::::getFROM:::::::::::::::localstorage
表单<::::::::::::getFROM::::::::::::::本地存储
after filling the form with data , I want to save the form with its contents in the localstorage, then when i want to fill other from with stored data.
用数据填充表单后，我想将表单及其内容保存在本地存储中，然后当我想用存储的数据填充其他表单时。
<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>
JSFIDDLEplease JSFIDDLE answer.
JSFIDDLE请 JSFIDDLE 回答。
UPDATED
更新
采纳答案by spacebean
You can do that easily, but if you want to store an array you will need to serialize or encode it first because localStorage doesn't deal with arrays. e.g.:
你可以很容易地做到这一点，但如果你想存储一个数组，你需要先对其进行序列化或编码，因为 localStorage 不处理数组。例如：
var yourObject = $('#your-form').serializeObject();
var yourObject = $('#your-form').serializeObject();
To save you do either:
为了保存您，请执行以下任一操作：
localStorage['variablename'] = JSON.stringify(yourObject)or localStorage.setItem('testObject', JSON.stringify(yourObject));
localStorage['variablename'] = JSON.stringify(yourObject)或者 localStorage.setItem('testObject', JSON.stringify(yourObject));
and to retrieve: JSON.parse(localStorage['yourObject']);or JSON.parse(localStorage.getItem('yourObject'));and then the field values are available as yourObject.fieldName;
并检索：JSON.parse(localStorage['yourObject']);或JSON.parse(localStorage.getItem('yourObject'));然后字段值可用为yourObject.fieldName;
EDIT: In the example above I used serializeObject which is a jQuery plugin. The code used is below. (You can use serializeArray if you prefer but you will have to do more work to make your data usable once retrieved):
编辑：在上面的例子中，我使用了 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;
};
回答by mar10
Another option would be to use an existing plugin.
另一种选择是使用现有插件。
For example persistois an open source project that provides an easy interface to localStorage/sessionStorage and automates persistence for form fields (input, radio buttons, and checkboxes).
(Disclaimer: I am the author.)
例如，persisto是一个开源项目，它为 localStorage/sessionStorage 提供了一个简单的接口，并自动化了表单字段（输入、单选按钮和复选框）的持久性。
（免责声明：我是作者。）
Note that this requires jQuery as a dependency.
请注意，这需要 jQuery 作为依赖项。
For example:
例如：
<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>
could be handled like this:
可以这样处理：
// 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");
});
