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

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

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

以下是我的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>

任务很简单：

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

这就是：

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

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

---

祝你好运

假设您只保存id而不保存前面的

\\

，那么您可能应该使用

$（'#'+inputId）

，而不是

$（inputId）

。谢谢您的注意！完全错过了。但是，它仍然不会加载表单的数据：（您能否显示

console.log（inputParse）；

？查看数据的保存方式会很有帮助。因为如果数据正确插入到相应的输入类型中，填充字段应该足够简单。

inputParse

仅返回

[对象对象]

作为回报，这是因为内容保存到本地存储吗？在本地存储中，

字段字符串的值如下：
{“付款类型”mngr\u 1\u 01:false，“付款类型”mngr\u 1\u 02:“90%”，“付款类型”mngr\u 1\u 03:true，“付款类型”mngr\u 1\u 04:false，“付款类型”mngr\u 1\u 06:false，“付款类型”mngr\u 1\u 07:false，“payment_type_mngr_1_08”：false，“payment_type_mngr_1_10”：false，“payment_type_mngr_1_11”：false，“payment_type_mngr_1_12”：“0%”
太棒了！不过有一个问题；我有jQueryUI滑块（基本上使用文本字段来表示值）将不会加载以显示其值。我可以找到存储在本地存储中的数据，但它不会加载。尝试将超时设置为
dataLoad（）
但它只显示文本值，而不移动滑块本身。有什么想法可以导致这种情况/什么可以解决它吗？好吧，我需要看看代码，以回答其余的代码将如何使用滑块进行收缩。我很确定，为了使滑块变为文本，需要进行一些额外的函数调用或初始化数据填充后处于活动状态，但如果没有几行代码，则不能再多说。但最好关闭该主题（如果您的问题已解决）并打开新主题。