Question

我正在创建一个HTML表单，我需要我的用户能够在关闭窗口/选项卡并重新打开它之后找回他们填充的任何数据。

如果我使用JavaScript cookie或HTML 5本地存储，那么我将不得不为每个输入标签编写代码，即使它有数千个。

那么，实现这一目标的最有效方法是什么？

P.S。我正在使用PHP进行后端处理。

我想要的功能就像我们在浏览器中一样，就像在firefox或chrome中恢复会话一样。

Answer 1

你可以像使用localstorage一样使用。

localStorage.setItem('formData', JSON.stringify($('form').serialize())); //comfortable java script way.

或使用cookies，你可以喜欢这个

$.cookie('formData', JSON.stringify($('form').serialize())); //can support old browsers also.

请阅读 storage-vs-cookies上的优秀接受答案，您将知道要使用哪一个。

Answer 2

LocalStorage是您的最佳选择。

我必须为每个输入标签编写代码，即使它就像数千个。

事实并非如此。您可以使用JS循环或每个jQuery来执行此操作：

$("input").each(function(){
              $(this).val(storage.getItem($(this).attr("id")));
          })
          .change(function(){
              storage.setItem($(this).attr("id"), $(this).val());
          });

当页面加载时，您遍历页面上的每个输入并根据输入的ID将内容放入其中。然后将事件侦听器附加到所有输入，这会将任何更改保存到本地存储中。

我没有对此进行测试，仅用于说明目的。这段代码可能不会马上工作，但我希望你理解这个概念。

如何在本地存储HTML表单数据？

2 个答案: