Question

我使用一个函数向localStorage提交值，另一个函数用于检索它们并将它们放入网页上各自的输入字段中。

我的问题是双重的。 retrieve()函数似乎没有做任何事情;甚至不将Null放入输入字段。其次，我希望onSubmit()函数实际存储输入值。

这是两个功能。我可以看到elements和s_elements，我会尝试检索它们。但没有任何反应！

function retrieve() {
    if (typeof(Storage) != "undefined") {
        var elements = document.getElementsByTagName('input');
        var s_elements = document.getElementsByTagName('select');
        for (var i=0; i<elements.length; i++) {
            if (elements[i].getAttribute("type") != "submit" && elements[i].getAttribute("type") != "button") {
                e = elements[i];
                e.setAttribute("value", localStorage[e.getAttribute("name")]);
            }
        }
        for (var i=0; i<s_elements.length; i++) {
            s_e = s_elements[i];
            s_e.setAttribute("value", localStorage[s_e.getAttribute("name")]);
        }
    }
}

function onSubmit() {
    var elements = document.forms["forsendur"].getElementsByTagName("input");
    var s_elements = document.forms["forsendur"].getElementsByTagName("select");
    for (var i=0; i<elements.length; i++) {
        if (elements[i].getAttribute("type") != "submit") {
                    e = elements[i];
                    localStorage[e.getAttribute("name")] = e.getAttribute("value");
        }
    }
    for (var i=0; i<s_elements.length; i++) {
                s_e = elements[i];
                localStorage[s_e.getAttribute("name")] = s_e.getAttribute("value");
    }
}

这是包含输入值的表单：

<form name="forsendur">
    < ... bunch of input and select fields >
    <input class="button2" type="submit" value="Calculate" onClick="onSubmit();"/>

</form>

这是调用retrieve()的唯一按钮：

<input type="button" class="button2" value="Last session" onClick="retrieve();">

编辑 _ 现在可以使用retrieve（）函数。我修了很多错别字。现在只剩下一个问题了。

Answer 1

问题的关键在于您尝试使用 HTML属性而不是 DOM属性来获取输入值。

HTML属性是这样的：

<a href="http://example.com"></a>

可以像这样访问 DOM属性：

document.querySelector('a').href = 'http://example.com'

浏览器会读取

HTML属性，因为它会解析您网站的html文本。浏览器创建一个表示html元素的 DOM对象，然后以类似于此的方式设置属性：

var a = document.createElement('a');
a.setAttribute('href', 'http://example.com')

对于 HTML属性，通常有等效的 DOM属性 - 就像我上面描述的.href属性一样。

这两件事之间的差异（除了你访问它们的方式之外）是加载HTML页面后的大多数事件都修改 DOM属性，而不是 HTML属性 - 例如输入input将更改相应 DOM对象上的.value属性，但它不会修改 HTML属性：< / p>

<input type="text" value="hello"/> - HTML属性 value将保留"hello"，除非您明确设置它。同时，当您输入输入时， DOM属性 .value将反映输入中的文本。

要在代码中提供具体示例，您需要更改该行 localStorage[e.getAttribute("name")] = e.getAttribute("value");＆lt; - 使用 HTML属性 value

到

localStorage[e.getAttribute("name")] = e.value;＆lt; - 使用 DOM属性 .value

使用Javascript，localStorage值始终为空

1 个答案: