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

Question

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

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

这是我的 HTML 结构的示例：

<form id="myForm" method="post">
   <input type="submit" onclick="dataSave();" value="Save">
   <input class="formField" type="checkbox">Task done!
   <input class="formField" type="text">How it went?
</form>

这是执行保存和加载到本地存储的当前 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()，我的$(document).ready(function(){ }); 中有一个简单的dataLoad();。

我怎样才能用保存的数据填写表格？我尝试了一些document.GetElementById 的解决方法，但没有成功。

Answer 1

任务很简单：

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

原来是这样：

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;
            }
        });
    }
}

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

祝你好运！