html5表单信息保存,使用localstorage HTML5保存表单(Save Form using localstorage HTML5)

使用localstorage HTML5保存表单(Save Form using localstorage HTML5)

有没有一种方法可以保存到本地存储并再次使用它，就像这样的逻辑：

form :::::::::::: saveINTO :::::::::::::::> local storage

form <:::::::::::: getfrom ::::::::::::::: local storage>

填写完表格后，我希望将表单的内容保存在localstorage中，然后当我想用存储的数据填充其他表单时。

First name:

Last name:

store into local storage

render from data again

JSFIDDLE请JSFIDDLE答案。

更新

Is there a way to Save from into localstorage and reuse it again, like this logic:

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

form <::::::::::::getfrom::::::::::::::: localstorage>

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.

First name:

Last name:

store into local storage

render from data again

JSFIDDLE please JSFIDDLE answer.

UPDATED

原文：https://stackoverflow.com/questions/19952403

更新时间：2019-06-19 22:12

最满意答案

你可以很容易地做到这一点，但如果你想存储一个数组，你将需要序列化或编码它，因为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;

};

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.:

var yourObject = $('#your-form').serializeObject();

To save you do either:

localStorage['variablename'] = JSON.stringify(yourObject) or 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;

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.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;

};

相关问答

你可以很容易地做到这一点，但如果你想存储一个数组，你将需要序列化或编码它，因为localStorage不处理数组。 例如： var yourObject = $('#your-form').serializeObject(); 为了节省你做的任何一个： localStorage['variablename'] = JSON.stringify(yourObject)或localStorage.setItem('testObject', JSON.stringify(yourObject)); 并检

...

馊主意。 访问机器的人总是能够读取本地存储器，没有什么可以做的，以防止它。 只需在firebug控制台中键入“localStorage”，就可以很好地列出所有的键/值对。 如果您的应用程序中存在XSS漏洞，那么存储在localStorage任何内容都可用于攻击者。 你可以尝试加密它，但是有一个catch。 在客户端上加密它是可能的，但这意味着用户必须提供密码， 并且必须依赖于经过验证的未经验证的加密技术的JavaScript实现。 当然可以在服务器端进行加密，但客户端代码无法读取或更新它，因此您将

...

您不应该听特定表单元素的点击事件，而应该听取表单的提交事件。 提交表格时，您可以掌握手头所有字段的信息，并且用户填写表格字段的顺序无关紧要。 $('#my-form').on('submit', function() {

/* place your logic here… */

});

You shouldn't listen to the click events of specific form elements but rather to the submit event of t

...

您正在使用的插件(sisyphus.js)似乎不是为处理“大量”字段而编写的。 如果你看一下来源： https://raw.githubusercontent.com/simsalabim/sisyphus/master/sisyphus.js 你会看到有一个方法saveAllData 。 与bindSaveDataOnChange方法结合使用，每次更改字段时都会保存所有字段。 而且，如果不是这种情况，你仍然会每10秒获得2秒的延迟(超时选项)。 我希望快速解决方法是分叉/修改或覆盖插件以使bin

...

在我看来，localstorage是一个比PHP和AJAX更好的自动保存选项。 对于后者，您必须发出AJAX请求(既保存数据，也检查页面加载时是否存在自动保存的数据)，以及占用磁盘空间来存储自动保存的数据。 使用localstorage，数据位于客户端的浏览器中，这意味着服务器上根本没有负载。 从安全方面来说，在任何一种情况下，您都希望确保不自动保存信用卡或SSN号码等内容。 In my opinion, localstorage is a much better option for autos

...

您只需要根据信用卡元素中的输入名称排除。 这是最简单的答案，但也是最不可重复使用的答案。 根据您正在做的事情，您可能希望添加标记以便不保存到您的html中，或者设置一个永远不应保存的已知输入名称的地图等，以获得更多的可重用性。 $("#saveData")

.click(function(e) {

e.preventDefault();

localStorage.setItem("flag", "set");

var data

...

1)您可以将您的页面放在互联网上，最好提供QR码以便在移动设备上快速加载( 这里是免费的QR生成器)，这样每个人都可以轻松测试 2)浏览器设置是否需要授予域在本地存储中存储值的权限？ 如果是这样，onunload就没有地方接受这样的请求。 在准备好的功能中放置一条存储指令进行测试 3)卸载有点不可靠(例如 - 浏览器崩溃)。 您是否考虑过在输入上保存onblur的值？ 在大型textareas中，即使用户仍在编辑，保存计时器中的值也是切实可行的。 4) 这个问题也考虑了卸载功能的问题。 也许未来对

...

如果存储的项目变为字符串，您可以在localStorage中存储您喜欢的任何内容，在您的情况下没有问题，并且每个站点的总存储量不超过5Mb。 你的方法可能是这样的。 当页面加载(使用jQuery)时，检查基本HTML模板是否存在 如果不使用jQuery加载它并将其存储在localStorage中 使用jQuery选择器在当前页面中选择适当的元素。 这可能是元素。 并使用$(...)。html(存储的html模板); 显示基本html。 如果需要插入动态值，请使用John Resig MicroTe

...

使用更改事件，查看是否选中了复选框; $('#MyCheckbox').change(function() {

var $this = $(this), // Current checkbox

isChecked = this.checked, // We can also use $this.prop('checked')

data = $('#form1').serializeArray();

if (isChecked) {

// Store se

...

像这样使用你的代码 constructor(){

this.currentItem = (localStorage.getItem('currentItem')!==null) ? JSON.parse(localStorage.getItem('currentItem')) : [ ];

this.todos = this.currentItem;

}

addTodo() {

let local_items = localStorage.getItem('curren

...