使用保存在本地存储中的数据填充HTML表单 [英] Populate HTML form with data saved on Local Storage

问题描述

我的应用程序将填写的表单数据(带有ID和值的输入字段)保存到本地存储，甚至成功地将它们加载回去，从而将解析后的ID和值再次备份.

My application saves the filled form data (input fields with their ID's and values) to Local Storage and even loads them back successfully, separating the parsed ID's and values back up again.

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

The problem is that I can't manage to pre-fill the form back up from the data that has been saved to Local Storage once the page reloads. Saved data remains in browser's resources, and console logs the correct values for each input field. However, nothing shows up on the page itself.

这是我的HTML结构的示例:

Here is an example of my HTML structure:

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

And here is the current JavaScript that does the saving and loading to Local Storage:

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

And to run the dataLoad() after the page has loaded, I have a simple dataLoad(); inside my $(document).ready(function(){ });.

如何使表单中保存的数据充满?我尝试了一些document.GetElementById解决方法，但是没有运气.

How can I get the form filled up with the saved data? I have tried some document.GetElementById workarounds, but no luck.

推荐答案

任务很简单:

• 获取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;
            }
        });
    }
}

您可以在文档加载时自动调用该功能，也可以将其分配给某个按钮(例如保存操作)，具体取决于您.

You can call the function automatically on document load or assign it to some button (like save action) - it's up to you.

祝你好运！

这篇关于使用保存在本地存储中的数据填充HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！