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()，我的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;
            }
        });
    }
}

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

祝你好运！

使用保存在本地存储

1 个答案: