使用保存在本地存储上的数据填充HTML表单

我的应用程序将填充的表单数据（带有ID和值的输入字段）保存到本地存储，甚至成功加载它们，再次将已解析的ID和值分开。

问题是，一旦页面重新加载，我无法从已保存到本地存储的数据中预先填充表单。 保存的数据保留在浏览器的资源中，控制台会记录每个输入字段的正确值。 但是，页面本身没有任何内容。

这是我的HTML结构的一个例子：

  Task done! How it went?  

以下是当前用于保存和加载到本地存储的JavaScript：

 if (typeof(Storage) !== "undefined"){ // Loading data function dataLoad(){ var inputParse = JSON.parse(localStorage.getItem('fieldString')); var inputId; var inputValue; var inputType; $.each(inputParse, function(key, value){ inputId = key; inputValue = value; if (inputValue === "true" || inputValue === "false"){ inputType = inputValue; } }); $(".formField").each(function(){ inputId = this.id; document.getElementById(inputId); if (inputType === "true"){ $(inputId).attr("checked", "checked"); } else { $(inputId).val(inputValue); } }); } // Saving data function dataSave(){ var mngrFields = {}; $(".mngr-field").each(function(){ if (this.type == "radio" || this.type == "checkbox"){ mngrFields[this.id] = this.checked; } else { mngrFields[this.id] = this.value; } }); localStorage.setItem('fieldString', JSON.stringify(mngrFields)); } 

并且在页面加载后运行dataLoad() ，我有一个简单的dataLoad(); 在我的$(document).ready(function(){ }); 。

如何让表格填满保存的数据？ 我试过一些document.GetElementById解决方法，但没有运气。

Answer 1

任务很简单：

• 获取localStorage内容（但首先检查是否存在）;
• 对于每个存储的ID，检查DOM中的HTML类型（因为您不知道它来自当前的localStorage对象）;
• 为其赋值或检查属性（如果是radio / checkbox）;

所以这里是：

 function dataLoad() { if (localStorage.getItem('fieldString') !== null) { var inputParse = JSON.parse(localStorage.getItem('fieldString')); $.each(inputParse, function (key, value) { var field = document.getElementById(key); if(field.type == 'radio' || field.type == 'checkbox'){ field.checked = value; }else{ field.value = value; } }); } } 

您可以在文档加载时自动调用该函数或将其分配给某个按钮（如保存操作） – 这取决于您。

祝好运！